CODEWITHSUNDEEP
javascripthtml
SaidbakR
SaidbakR

Reputation: 13544

innerHTML does not work with Javascript output contents

I try to make some kind of ads rotator as follows:

<html>
<head>
    <title></title>
    <style>
        body {
            margin:0;
            padding:0;
        }
    </style>
    <script>
        function fillBoard() {
            s = document.getElementsByClassName('slots');
            board = document.getElementById('board');
            board.innerHTML = s[0].innerHTML
            alert(board.innerHTML);
        }
    </script>
</head>

<body>
    <div id="board" style="width:160px; text-align: center; margin:0">
    </div>

    <div class="slots" style="display:none">
        <!-- THE PROBLEM IS HERE -->
        <!-- Begin Hsoub Ads Ad Place code -->
        <script type="text/javascript">
            <!--
            hsoub_adplace = 1310003403401506;
            hsoub_adplace_size = '125x125';
             //-->
        </script>
        <script src="http://ads2.hsoub.com/show.js" type="text/javascript"></script>
        <!-- End Hsoub Ads Ad Place code -->
    </div>
    <div class="slots" style="display:none">
        <img src="http://lorempixel.com/160/90/sports/1/" />
    </div>

    <div class="slots" style="display:none">
        <img src="http://lorempixel.com/160/90/sports/2/" />
    </div>

    <div class="slots" style="display:none">
        <img src="http://lorempixel.com/160/90/sports/3/" />
    </div>

    <script>
        fillBoard();
    </script>
</body>

</html>

In the code above:

  1. There is a div with id board to act as a board that displays contents.
  2. The board should be filled with data supplied from other hidden divs with class name slots using innerHTML property.
  3. To do the above a function named fillBoard() is defined in the head section of the page and then called at the end of it just before closing </body> tag.

What is happening?

The hidden divs slots works fine with divs that contain images. However, in the first div there are a javascript code that should generates ads from an ads network which it does not work.

I expect that the javascript code of the ads network should fill its div with data, then the calling of fillBoard() will just copy its content to the board div. However, this is does not occur!

I need to know how could I overcome this issue?

A live example is found here

Upvotes: 0

Views: 353

Answers (2)

Chris B
Chris B

Reputation: 733

Ok so after some more digging I've found the issue, although I don't have an easy solution at the moment.

The js file show.js is generating some ad content inside of an iframe for you, which you are placing in the first 'slots' div. Simple enough. When you are setting the content of the board to the content of the first slots class, an iframe is being created in the board div but without the same content.

After some searching it seems that innerHTML of an iframe will not copy the contents of the iframe if it comes from a domain other than the page domain for security reasons.

It seems to me that the solution at this point is to either show and hide the slots divs like Zhertal suggested or you can possible find some other way to physically move the content of the slots div into board, but this may still be a violation of the same security concern. I'm going to keep digging and I'll edit this answer if I find anything more.

Reference SO posts: Get IFrame innerHTML using JavaScript

Javascript Iframe innerHTML

Upvotes: 1

Zhertal
Zhertal

Reputation: 425

You can just show the desired hidden div and it's usually a better practice than copying DOM content. If you make sure to only show one of the hidden divs at a time you can show the image always in the same place.

Try this to show the first "slots" element:

s[0].style.display = 'block';

Upvotes: 1

Related Questions