JavaScript 在 DIV 中动态加载脚本
Posted
技术标签:
【中文标题】JavaScript 在 DIV 中动态加载脚本【英文标题】：JavaScript load script dynamically inside a DIV 【发布时间】：2012-06-08 17:47:58 【问题描述】：我已经动态创建了一个 DIV，我希望它包含一个 javascript 链接，它会在上面输出一些东西。 JavaScript 链接源是绝对的。 显然，这是行不通的：
var div = document.createElement('div');
div.id = 'mydiv';
div.innerhtml = "<script type='text/javascript' " +
"src='http://mydomain.com/myscript.js'></script>";
document.body.appendChild(div);
所以我尝试了这个
var script = document.createElement('script')
script.setAttribute('type', 'text/javascript');
script.setAttribute('src', 'http://mydomain.com/myscript.js');
var div = document.createElement('div');
div.id = 'mydiv';
div.appendChild(script);
document.body.appendChild(div);
在我的脚本文件中，我有一个简单的alert('Testing...'); 代码。
问题是它不起作用。脚本包含在 div 中输入（当我在 Chrome 中检查 DIV 时会看到它），但它不起作用。我没有看到 'Testing...' 消息。
我错过了什么或做错了什么？谢谢！
【问题讨论】：
你试过document.getElementById('id-of-your-div').innerHTML('Loading...')吗？此外，您可以让 div 以 <div id='some-id'>Loading ...</div> 开头，然后脚本可以写入其 innerHTML。脚本不需要包含在 div 中，实际上也不应该，因为您可能会根据您对 div 内容所做的操作来覆盖它。
尝试在你的 JS 中加入“alert('testing')”。如果您在空白页上执行 document.write，您应该看到输出，但根据标记，即使实际上是写的，文本也可能不可见。您尝试附加 javascript 的方式应该可以正常工作。
如果您在 DOM 完成后执行此操作，即使您确实让脚本运行，您也无法在不将整个页面吹走的情况下执行 document.write建成。无论如何，您通常应该避免使用document.write；直接操作 DOM 会更有意义。
我尝试了你所有的建议。脚本已正确链接、添加，但未调用“alert('Testing')”函数。
阿里，看看：JSFiddle。显然，我将src 属性替换为innerHTML，因为我不会仅仅为了警报而托管JS，尝试调整它并确保您的脚本的来源是正确的。
【参考方案1】：
按照我的理解，您的代码不会等到 DOM 准备好。
建议使用 jquery 的ready，这将确保传递给它的脚本仅在 DOM 准备好后运行
希望对你有帮助
【讨论】：
好的。在将 div 附加到正文后，我将脚本附加到了 div，它现在可以工作了！ 但这不是真正的原因/解决方案。在我的代码中，我在将脚本附加到body 之前附加了脚本。【参考方案2】：
<html>
<head>
</head>
<body>
<script type='text/javascript'>
var script = document.createElement('script')
script.setAttribute('type', 'text/javascript');
script.setAttribute('src', 'my.js');
var div = document.createElement('div');
div.id = 'mydiv';
div.appendChild(script);
document.body.appendChild(div);
</script>
</body>
</html>
这段代码对我有用，
但是，是的，document.write() 对我不起作用。
【讨论】：
以上是关于JavaScript 在 DIV 中动态加载脚本的主要内容，如果未能解决你的问题，请参考以下文章