如何解决如何在DOM中包含动态Javascript文件而不重复相同文件
我想通过在特定div中使用AJAX动态加载<div>
内容。在AJAX调用之后,我想在页脚中加载JS文件。我通过单击菜单加载了内容,而没有使用URL哈希加载页面。我的问题是,当我多次单击同一链接时,由于附加了JS文件,因此JS文件正在加载多次。这就是每个事件发生多次的原因。我想在检查文件是否已经加载到DOM之前先加载JS文件。如果该文件未加载到DOM中,我将在DOM中附加一个JS文件。
这是URL建议的答案,这是我的代码:
var Utils = {
loadjs: function(url){
var footer = document.getElementsByTagName('body')[0];
var script = document.createElement( 'script' );
script.type = 'text/javascript';
script.src = url;
footer.appendChild(script);
},}
Utils.loadjs(url);
解决方法
您可以阅读脚本标签以搜索是否存在特定脚本。如下所示:
var Utils = {
loadjs: function(url) {
var me = document.querySelectorAll('script[src="' + url + '"]');
if (me && me.length >= 1) {
return null;
}
var footer = document.getElementsByTagName('body')[0];
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = url;
footer.appendChild(script);
},}
Utils.loadjs(url);
,
甚至可以从常规脚本中使用动态import()
语法加载模块。
这样做的好处是将这些脚本作为模块加载,这些脚本始终处于严格模式下并且具有模块作用域。
Read more about dynamic import
因此,Utils.loadjs(url)
代替了import(url)
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。