0

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

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

在上面的代码中：

  1. 有一个div带有 idboard的板作为显示内容的板。
  2. 该板应使用属性填充从其他divs具有类名的隐藏提供的数据。slotsinnerHTML
  3. 要执行上述操作，在页面的 head 部分中定义了一个名为的函数，然后在结束标记fillBoard()之前在其末尾调用。</body>

怎么了？

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

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

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

一个活生生的例子可以在这里找到

4

2 回答 2

1

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

试试这个来显示第一个"slots"元素：

s[0].style.display = 'block';
于 2013-10-29T14:19:00.647 回答
1

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

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

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

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

参考 SO 帖子： 使用 JavaScript 获取 IFrame innerHTML

Javascript Iframe 内部HTML

于 2013-10-29T15:00:08.697 回答