如何在 JavaScript append 中执行 <script> 代码

Question

我正在使用一个只有JavaScript的插件。我需要它动态地创建一个带有广告的DIV元素。

我不明白为什么这个不起作用：

$(this).append('<div class="overlay-background">Advertisement

     <script type="text-javascript">

          GA_googleFillSlot("blog_landing_right_rectangle_300x250");

     </script>'

它会创建一个显示 "Hello World" 的元素，但不会执行 GA-googleFillSlot 函数。

- user734063

---

你在HTML页面中使用这段代码吗？如果是的话，关闭</script>标签可以被视为最外层</script>标签的结束标签。 - Vladimir Kolesnikov

Answer 1

将HTML追加到DOM中不会导致浏览器评估所添加的HTML中的任何脚本标签。

如果您真的想这样做，可以使用eval()来评估javascript代码:

eval($(this).find("script").text());

- wless1

---

当使用$(this).append时，此解决方案会导致未知的白屏错误。将其放在外面时没有任何变化。我没有修改上面代码的方式。 - user734063

看起来在pubads.g.doubleclick.net上有数十个错误请求。看起来我正在循环中添加（NextGEN画廊旋转木马）。 - user734063

Answer 2

我知道这是一个老问题，但今天我遇到了类似的问题。解决方案是使用createContextualFragment。

我的代码大致如下:

var tagString = '<script async type="text/javascript" src="path_to_script"></script>';

var range = document.createRange();
range.selectNode(document.getElementsByTagName("BODY")[0]);
var documentFragment = range.createContextualFragment(tagString);
document.body.appendChild(documentFragment);

- temo

Answer 3

这段代码在我的浏览器上可以运行。

$('body').append('<script>alert("test");<' + '/' + 'script>');

所以可能是$(this)实际上导致了你的问题。

你能否将其替换为'body'，看看是否可以这样解决？

- Azder

---

如果你在字符串 ...</' + 'script>'); 中断开 </script>，这个方法对我有效。 - Popnoodles

谢谢，我忘记了将脚本放进脚本中，因为通常我会把它们放进文件里。 - Azder

Answer 4

在您的情况下，一个解决方法是添加一个带有onload事件的虚假图像：

<img src="blank.gif" onload="GA_googleFillSlot('blog_landing_right_rectangle_300x250')" />

- Christophe

Answer 5

既然你在使用JavaScript，你可以添加并执行以下代码：

$(this).append('<div class="overlay-background">Advertisement</div>');

GA_googleFillSlot("blog_landing_right_rectangle_300x250");

- memical

Answer 6

请尝试以下操作：

s = '<' + 'script type="text-javascript">' +
    'GA_googleFillSlot("blog_landing_right_rectangle_300x250");' +
    '<' + '/' + 'script>';
$(this).append(s);

更新：遗憾的是，这个方法行不通，请使用wless1的解决方案。

- Vladimir Kolesnikov

---

这并没有帮助，因为脚本无论如何都不会运行。 - Christophe