Question

我正在尝试将外部JavaScript文件动态加载到HTML元素中以预览广告代码。脚本加载并执行但脚本包含“document.write”，它有一个问题正确执行但没有错误。

<html>
    <head>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
        <script type="text/javascript">
        $(function() {
            source = 'http://ib.adnxs.com/ttj?id=555281';

            // DOM Insert Approach
            // -----------------------------------
            var script = document.createElement('script');
                script.setAttribute('type', 'text/javascript');
                script.setAttribute('src', source);

            document.body.appendChild(script);
        });
        </script>
    </head>

<body>
</body>
</html>

如果

，我可以让它发挥作用

如果我将源移动到同一个域进行测试
如果脚本被修改为使用document.createElement和appendChild而不是document.write，就像上面的代码一样。

我无法修改脚本，因为它是由第三方生成和托管的。

有谁知道为什么document.write无法正常工作？有没有办法解决这个问题？

感谢您的帮助！

Answer 1

另一个解决方案是创建一个iframe，然后在ajax调用就绪时在iframe中加载脚本：

var iframe = document.createElement('iframe');
document.body.appendChild(iframe);
var doc = iframe.contentWindow.document;

// do this whenever you want (f.ex after ajax is made):
doc.open();
doc.write('<script src="http://ib.adnxs.com/ttj?id=555281">\x3C/script>');
doc.close();

这样，结尾脚本中的document.write不会影响您的网站，只会影响iframe。您需要设置iframe样式以适合广告。

Answer 2

如果外部脚本标记还包含document.write，则异步加载外部脚本标记可能会有危险。因此，我建议您在最后使用document.write：

document.write('\x3Cscript src="http://ib.adnxs.com/ttj?id=555281">\x3C/script>');

或者只是一个脚本标签（duh）：

<script src="http://ib.adnxs.com/ttj?id=555281"></script>

Answer 3

你document.write上的不想要$(function()（当dom准备就绪时）

删除document .ready包装。

移动你的 - </body>之前。（或容器位置 - 您希望窗口小部件显示的位置。）

所以：

<html>
    <head>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
    </head>

<body>

//bla bla...

<script type="text/javascript">

  (function (){

           var source = 'http://ib.adnxs.com/ttj?id=555281';

            // DOM Insert Approach
            // -----------------------------------
            var script = document.createElement('script');
                script.setAttribute('type', 'text/javascript');
                script.setAttribute('src', source);
                document.body.appendChild(script);
   })();

</script>
</body>
</html>

重要提示：

enter image description here

Answer 4

我遇到了同样的问题，想出了一个解决方案。我认为我的情况稍微复杂一点，因为我的布局是在客户端生成的，在dom-ready之后，这意味着我无法使用这种方式渲染脚本。这为我增加了一个额外的步骤，但如果您的布局是在服务器端生成的，那么它可能不是一个额外的步骤。

生成您的网址。在你的情况下，它来自ajax请求，在我的情况下，来自用户交互
使用此URL重新加载页面（可能使用新创建的表单将URL发布到服务器）

如果你能够在服务器上渲染脚本包括它应该在哪里，那么就这样做，你就完成了。否则：

在服务器端创建一个隐藏的div，并具有特定的ID。这将加载pre-dom-ready脚本并正确触发document.write。
抓取包含脚本的div的内容，你现在在变量中有html，你可以把它放在页面的任何地方！

document.write加载外部Javascript源时不起作用

4 个答案: