Question

想象一下以下两个文件：

的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 singleton。有没有更好的方法来执行此操作，或者至少是一种将内容放入div而不执行或删除脚本标记然后在其上运行eval的方法？

Answer 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()

Answer 2

在加载文档后使用document.write会重写整个文档，所以如果这样做，整个页面将是空白的，文本为'THE MAGIC！'，所以如果你不希望发生这种情况，你会想要使用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());

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

2 个答案: