javascript - 将 javascript 添加到 onDocumentReady 问题

Question

我的页面上有一个 div 定义如下:

<div id="scripts">
</div>

我想动态更改 div 的内容并使用 jQuery 加载到一些脚本中。我这样做是这样的:

$('#scripts').html('<script language="JavaScript">pn = "landing page"; '+
'cms_1 = "content"; '+
'cms_2 = "promotional "; '+
'cms_3 = "campaign"; '+
'cms_s = "blk:us:dc"; '+
'cms_env = "dev"; '+
'cms_country = "USA"; '+
'<\/script>');

这是在 document.Ready 函数中。但是，当我在页面加载后查看源代码时，div 显示为空，并且我看不到脚本标签。我认为脚本没有被添加，但是当我将 alert("done"); 添加到脚本中时。我收到警报，告诉我代码已执行。

为什么我在查看源代码时看不到所做的更改？源 html 是否在 document.ready 函数之前渲染？

Answer 1

jquery 的 html 函数在内部使用浏览器的innerHTML 属性(如果可用)。一般来说，通过innerHTML插入的脚本 block 几乎不会在任何浏览器中执行。

尝试使用内容创建脚本标记并将其附加到文档中，例如

var script=document.createElement('script');
script.type='text/javascript';
script.html(...);

$("#scripts").append(script);

在评论中看到您的动机后，我必须补充一点:虽然您稍后可以从网站上物理删除脚本标签，但这不会产生卸载其内容的效果(例如脚本中定义的函数)。在不刷新页面的情况下实现这一点的唯一方法是封装其中定义的对象并手动删除它们。当然，只有以这种方式预先设计脚本的内容，这才有可能。