javascript – 仅在尚未加载js脚本且仅加载一次时加载js脚本

前端之家收集整理的这篇文章主要介绍了javascript – 仅在尚未加载js脚本且仅加载一次时加载js脚本前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我一直在尝试加载一个大的js脚本.我没有在页面加载时加载它,因为它不需要,并且会减慢页面加载速度.

所以我一直在尝试使用jQuery的$.getScript和Modernizr.load加载它(因为我已经使用了Modernizr).

我已经尝试遍历所有< script>< / script>元素和检查他们的src属性,看看这个脚本是否是其中之一,但每次运行测试时仍然加载它们.

我还尝试在脚本的开头设置一个全局变量为true,并检查是否已设置并且每次检查时它仍然加载.
以下是我在该实例中所做的事情:

Modernizr.load({
    test:if(window.flag === undefined),yep:'conversation.js',callback:function(){    
        antecedent();   
    }
});

和var flag = true;被设置在对话的第一行.js

调用此测试以检查它是否已加载并且只加载一次时,有没有人有任何想法如何让这个脚本加载一次?

**编辑/更新:** document.getElementsByTagName(‘head’)[0] .appendChild(document.createElement(‘sc ript’)).src =’conversation.js’;可以工作,但我如何检查脚本是否已经加载,然后只有在尚未包含脚本时才调用它?

解决方法

首先,您需要检查脚本是否已在页面上:
var list = document.getElementsByTagName('script');
var i = list.length,flag = false;
while (i--) {
    if (list[i].src === 'filePathToJSScript') {
        flag = true;
        break;
    }
}

// if we didn't already find it on the page,add it
if (!flag) {
    var tag = document.createElement('script');
    tag.src = 'filePathToJSScript';
    document.getElementsByTagName('body')[0].appendChild(tag);
}

条件中的代码可用于动态地向页面添加脚本.

ES 6更新

ES 6简化了这一点:

let scripts = Array
    .from(document.querySelectorAll('script'))
    .map(scr => scr.src);

if (!scripts.includes('filePathToJSScript')) {
  // same as above
}
原文链接:https://www.f2er.com/js/155160.html

猜你在找的JavaScript相关文章