Question

我尝试制作某种广告旋转器如下：

<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>

在上面的代码中：

div代表board作为显示内容的主板。
应使用divs属性填充其他隐藏slots类名innerHTML的数据。
为了做到这一点，在页面的head部分定义了一个名为fillBoard()的函数，然后在关闭</body>标记之前调用它。

发生了什么事？

隐藏的div slots适用于包含图片的div。但是，在第一个div中有一个javascript代码，应该从广告网络中生成广告但不起作用。

我希望广告网络的javascript代码应该用数据填充div，然后fillBoard()的调用只会将其内容复制到board div。但是，这不会发生！

我需要知道如何克服这个问题？

找到了一个实时示例here

Answer 1

您可以只显示所需的隐藏div，这通常比复制DOM内容更好。如果您确保一次只显示一个隐藏的div，则可以始终在同一位置显示图像。

尝试此操作以显示第一个"slots"元素：

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

Answer 2

好的，经过一番挖掘，我发现了这个问题，虽然目前还没有一个简单的解决方案。

js文件show.js正在为你生成一些iframe内的广告内容，你将它放在第一个'slots'div中。很简单。当您将电路板的内容设置为第一个插槽类的内容时，会在电路板div中创建一个iframe但没有相同的内容。

经过一些搜索后，出于安全原因，iframe的innerHTML似乎不会复制iframe的内容（如果它来自页面域以外的域）。

在我看来，此时的解决方案是显示和隐藏像Zhertal建议的插槽div，或者你可以找到一些其他方法将插槽div的内容物理移动到板上，但这可能仍然是违反同样的安全问题。我要继续挖掘，如果我找到更多的话，我会编辑这个答案。

参考SO帖子： Get IFrame innerHTML using JavaScript

Javascript Iframe innerHTML

innerHTML不适用于Javascript输出内容

2 个答案: