卸载外部.js文件

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

main-page.html加载vía 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(/<scripts+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加载页面。您可以很容易地检查该脚本是否已被使用，并跳过加载。

相关内容

最新更新

热门标签：