在页面加载时将 <script> 标记动态插入 HTML答案

【问题标题】：Dynamically Inserting <script> tags into HTML on Page Load在页面加载时将 <script> 标记动态插入 HTML
【发布时间】：2011-03-08 00:59:46
【问题描述】：

我正在尝试使用 Javascript 动态插入 Tweetmeme 按钮。我目前在整个站点中使用 jQuery。这是我正在使用的脚本。我基本上想用一类日记条目循环浏览所有博客条目，并将以下 JavaScript 附加到末尾。这个 Javascript 直接来自 tweetmeme.com。但这对我不起作用，它与 append() 之间的代码有关。它不喜欢第二组脚本标签。

<script type="text/javascript"> 
$(document).ready(function() {

$('.journal-entry').each(function(index) {
    $(this).append('<script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script>');
   });

});
</script>

感谢任何帮助。谢谢。

【问题讨论】：

标签： javascript jquery

【解决方案1】：

append(...) 调用中字符串中的结束</script> 正在结束整个<script>

尝试将其拆分为两个字符串。例如：

$(this).append('<script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></'+'script>');

【讨论】：

【解决方案2】：

不要这样做。

将<script> HTML 内容插入 DOM 是不可靠的：它在不同浏览器中的工作方式略有不同，而 jQuery 不会保护您免受这些差异的影响。

特别是，写innerHTML never 会导致<script> 元素的内容执行，但随后将<script> 元素从它所在的位置移动到新的父元素（这是jQuery 的一部分） append 进程）可能导致脚本执行，但并非总是如此（这取决于浏览器）。

无论如何，它永远不会起作用，因为查看button.js，它正在调用document.write()。该函数仅在初始文档解析时调用才有意义；如果您之后从事件中调用它，该调用将简单地替换整个页面内容，从而破坏您现有的页面。调用document.write() 的脚本只能在文档加载时从<script> 元素的执行路径内运行。您根本无法将脚本包含在动态创建的内容中，因为它不是为它设计的。

（如果它让你感觉好一些，那根本就不是设计的；button.js 脚本是一堆破烂不堪的旧废话，包括不正确的 URL 转义——使用 escape 而不是正确的 encodeURIComponent——并且缺少 HTML 转义。远离这些白痴可能会更好。）

【讨论】：