将 JavaScript 代码动态添加到页面
Posted
技术标签:
【中文标题】将 JavaScript 代码动态添加到页面【英文标题】：Dynamically Adding JavaScript Code To Page 【发布时间】：2016-02-04 21:25:05 【问题描述】：这个问题与Frustrating innerhtml Issue相关联。
由于此问题与另一个问题重复，因此我参考了该问题以寻求解决方案。我通过了列表中的第二个答案（37 票）。所以我使用这种编码将javascript动态添加到我的页面。
<html>
<head><title>Javascript Using innerHTML</title>
<script type="text/javascript">
function setcode(code)
document.write("<img src='empty.gif' onload='function msgbox(msg)alert(msg);;' />");
</script>
</head>
<body onload="">
<div id="hello">
</div>
<button onclick='setcode(document.getElementById("hello"))'>SET</button>
<button onclick='msgbox("what up man?!");'>CHECK</button>
</body>
</html>
现在的问题是，当我按下 SET 按钮时，我当前的所有页面都将不复存在，只保留 document.write() 中的代码。我做错了什么还是什么？请注意，我想将 javascript 编码添加到我的页面而不删除当前的视觉对象：S
【问题讨论】：
当您执行 document.write 时，您会为其分配一个值，因此之前的值会被删除。您必须将值附加到容器。您可以将此article 用作参考 【参考方案1】：问题是当我按下 SET 按钮时，我当前的所有页面都被删除，只剩下 document.write() 中的代码
这是document.write 函数的预期行为。它将覆盖页面上的所有内容。
您需要将内容附加到可以使用以下内容的页面：document.body.innerHTML += "<img src..">
您的示例如下所示：
function setcode(code)
document.body.innerHTML += "<img src='empty.gif' onload='function msgbox(msg)alert(msg);;' />";
【讨论】：
这看起来很有希望。我应该试试这个，看看它是否有效。 好的，它不起作用。代码正在被附加到文档正文中，但由于蹩脚和未知的原因，它的javascript部分没有被执行。这样当我按下 CHECK 按钮时，不会出现应有的消息框。但是，当我将 CHECK 按钮编码编辑为 alert(document.body.innerHTML) 时，它显示该行已成功附加 SET 按钮代码。我做错了什么？ 是否应该将函数 msgbox 定义在 setcode 函数之上，而不是在图像的 onload 属性内？ 顾名思义，编码的目的是动态向页面添加javascript代码。如果我在页面的开头有任何硬定义的代码，我会简单地将它添加到 head 部分并完成它。另外，请查看顶部链接的问题。我认为用于此目的的整个 innerHTML 方法是不正确的。因为我能够在上一个问题中成功地将代码添加到 DIV 的 innerHTML 中，并且这也没有被 执行【参考方案2】：好的，我为我的问题找到了一个出色的工作解决方案。这是Can I add javascript dynamically to an existing script element发布的第二个答案
<html>
<head><title>Javascript Using innerHTML</title>
<script type="text/javascript">
function setcode(code)
var JS=document.createElement("script");
JS.text="function msgbox(msg)alert(msg);";
document.body.appendChild(JS);
</script>
</head>
<body onload="">
<div id="hello">
</div>
<button onclick='setcode(document.getElementById("hello"))'>SET</button>
<button onclick='msgbox("hello");'>CHECK</button>
</body>
</html>
完美运行，没有任何故障或问题。感谢 kennebec 的回答。
【讨论】：
以上是关于将 JavaScript 代码动态添加到页面的主要内容，如果未能解决你的问题，请参考以下文章