0

想象一下以下两个文件：

测试.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？

4

2 回答 2

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()
于 2013-10-02T16:55:28.847 回答
1

在加载文档后使用 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());
于 2013-10-02T17:02:07.333 回答