是否可以将脚本动态加载到引用局部变量的 div 中？答案

【问题标题】：Is it possible to dynamically load a script into a div that references local variables?是否可以将脚本动态加载到引用局部变量的 div 中？
【发布时间】：2013-10-09 03:33:38
【问题描述】：

想象以下两个文件：

test.html

<div id="stuff"></div>
<button onclick="doStuff()">Magic</button>
<script>
var foo = new function() {
    this.bar = function() {
        return "THE MAGIC!";
    };
};

function doStuff() {
    $('#stuff').load('stuffToDo.html');
}
</script>

stuffToDo.html

<div><script>document.write(foo.bar());</script></div>

我想将 stuffToDo.html 中的动态内容插入到 test.html 中的 div 中。我发现使用 jQuery.load() 或 jQuery.get() 以及随后的 $('#stuff').html(data) 似乎会导致脚本在插入之前执行，因此在它之前foo 单身人士。有没有更好的方法来做到这一点，或者至少有一种方法可以将内容放入 div 而不执行或删除脚本标签，然后在其上运行 eval？

【问题讨论】：

标签： javascript jquery html ajax scope

【解决方案1】：

我建议实际插入一个脚本标签，然后添加到 innerHTML。

在纯 Javascript 中：

var script= document.createElement('script');
script.src = stuff.js
document.body.appendChild(script);

//in script.js

var stuff=document.getElementsById('stuff');
stuff.innerHTML=foo.bar()

【讨论】：

在正确的轨道上，这似乎确实在范围内执行。但是，我仍然想加载一个 html 文件而不是 js 文件，因为最终实现将具有更复杂的格式。我想我可以把它分成两个文件，一种是用 ajax 加载的模板，然后是一个在该模板上调用的脚本，然后用这个方法加载。
这绝对是包含脚本的更现代的方法。 document.write()来自包含的 html 文件可能会导致麻烦。即，如果您在页面加载后执行此操作，则会擦除页面。
因此出现了一个新要求，即脚本必须能够“刷新”或再次运行。我决定将 stuffToDo.html 拆分为一个 layout.html，其中包含一堆命名的 div 和一个 script.js。如果我将布局 ajax 到 div 中，那么一切都会在第一次运行，然后再调用脚本。如果我想再次运行脚本，是否有任何问题或替代方法只是再次附加它？除了 DOM 中的几十个重复的脚本标签之外……

【解决方案2】：

在加载文档后使用 document.write 将重写整个文档，所以如果这样有效，整个页面将是空白的，并带有文本“魔法！”，所以如果你不希望这种情况发生，你会想要使用 jQuery 插入数据而不是 document.write。

<div><script>$('body').append(foo.bar());</script></div>

插入这样的脚本在不同的浏览器上可能会产生不同的结果，最好使用脚本包含。您的函数 foo 在全局范围内，因此您可以在包含的脚本中使用它。使用jQuery.getScript:

function doStuff() {
    $.getScript('/path/to/script.js');
}

那么脚本可以这样做：

$('#stuff').html(foo.bar());

【讨论】：

document.write 很好，我将改用 jQuery。我不想使用 getScript，因为 html 文件包含格式信息。我想我可以使用前面提到的模板和脚本的分离。