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

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');

我收到控制台消息“广告已加载”，但广告未显示，当我检查元素时，<script>未将 div 添加到带有 class 的元素中ad。

Firebug 没有出现任何错误，有什么明显的我遗漏了为什么这不起作用？我至少希望脚本标签出现在元素中。

Answer 1

我不能发表评论，但试着把这行写成这样：

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

该jQuery.html([string])函数定义.ad.

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

Answer 2

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

我的解决方案是使用 iframe。所以而不是：

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

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

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

其中/ads/ad.html只包含标准的<script></script>东西。

Answer 3

无论如何，“广告已加载”都会被打印出来。无论脚本是否成功加载到“广告”类元素中。您需要打印广告的内容，

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

console.log(result);

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