Question

我正在使用AJAX加载一些HTML和JS：

main-page.html 加载了一个名为 page-to-load.html 的页面的AJAX。

<!-- 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文件（太多了），我想按需加载和卸载它们。

Answer 1

理论上可以通过删除脚本标记来完成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'
    }
}

然后有一个loader函数，它同时使用document.createElement('script')加载脚本并使用HTML加载页面。您可以轻松检查该脚本是否已被使用并跳过加载。

卸载外部.js文件

1 个答案: