有条件地加载外部脚本不起作用，没有错误

Question

在我的条件下，我有：

var url = "http://ads.eyeonx.ch/adserverscript/custom.min.js";
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = url;
$('.ad').append(script);
console.log('ad loaded');

我收到控制台消息 'ad loaded'，但广告没有显示，当我检查元素时，<script> 没有添加到 div 元素 class ad.

Firebug 未出现任何错误，我是否遗漏了任何关于为什么这行不通的明显信息？我至少希望脚本标记出现在元素中。

Answer 1

'ad loaded' 无论如何都会打印出来。不管脚本是否成功加载到 'ad' class 元素中。您将需要打印广告内容，

var result = document.getElementsByClassName("ad")[0].innerHTML;

console.log(result);

或者，您可以尝试 'View Source' 查看页面上加载的内容。正如@KingCodeFish 所建议的那样，Chrome 开发人员工具也是用于此目的的强大工具。

Answer 2

我无法发表评论，但请尝试将行改成这样：

$('.ad').html('<script type="text/javascript" src="'+url+'"></script>');

jQuery.html([string])函数定义了.ad的内部HTML。

但是你不需要为此创建变量...

Answer 3

关于检查元素时为什么代码没有显示的确切问题仍然未知，但我注意到 Firefox 控制台（不是 Firebug 控制台）中的浏览器错误抱怨使用 document.write(); 的外部脚本。这似乎与页面加载后添加它的能力冲突。

我的解决方案是使用 iframe。所以代替：

var url = "http://ads.eyeonx.ch/adserverscript/custom.min.js";
$("<script>").attr({"type": "text/javascript", "src": url}).appendTo(".ad");

我删除了 .ad div 并使用此代码动态添加 iframe：

$("<iframe>").attr({"class": "ad", "src": "/ads/ad.html", "scrolling": "no"}).prependTo('#container');

其中 /ads/ad.html 只包含标准 <script></script> 内容。

有条件地加载外部脚本不起作用，没有错误

Loading an external script conditionally not working, no errors

javascript

jquery

conditional

external-script