我正在使用 AJAX 加载一些 HTML 和 JS:
main-page.html 通过 AJAX 加载一个名为 page-to-load.html 的页面。
<!-- main-page.html -->
<html>
...
<script>
$.ajax({
type:"POST",
url:"page-to-load.html",
success:function(data) {
$("#some_id").html(data);
}
});
</script>
...
</html>
page-to-load.html 包括 html 和一个 js 文件:
<!-- page-to-load.html --->
<script src="scripts-for-this-html.js"></script>
<p>This is a HTML page working with above external .js file</p>
如您所见，我正在加载一个 js 文件，scripts-for-this-html.js
这非常有效。问题是，如果我再次加载(我的意思是，“#some_id”变空并再次加载 page-to-load.html)所有脚本(scripts-for-this- html.js) 保留在浏览器内存中(例如，如果我在这个 .js 文件中有一个事件，这个事件会重复我加载文件的次数，即使我已经从中删除了脚本元素DOM)。
有什么方法可以完成这项工作吗？我不想一次包含所有 .js 文件(太多了)，我想按需加载和卸载它们。
最佳答案
JavaScript 卸载理论上可以通过删除脚本标签(就像您对 .html 所做的那样)并通过消除对与脚本关联的任何对象的所有引用来完成。这涉及删除每个引用和事件监听器. 即使留下一个也可能会将该变量的功能范围保留在内存中，从而导致泄漏。
如果脚本已经加载，使用正则表达式删除脚本会很聪明。 (感谢@JCOC611 剥离标签的想法。)像这样的东西:
var usedScripts = {};
html = html.replace(/<script\s+src="([^"]+)"><\/script>/gi, function(str, file) {
if(usedScripts[file]) {
return "";
} else {
usedScripts[file] = true;
return str;
}
});
如果你的页面数量有限，我更喜欢做的是有一个对象:
{
myPage: {
html: 'myhtml.html',
script: 'myscript.js'
}
}
然后有一个加载器函数，它同时使用 document.createElement('script') 加载脚本并使用 HTML 加载页面。您可以轻松检查该脚本是否已被使用并跳过加载。
关于javascript - 卸载外部 .js 文件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7781406/