仅在不存在时将脚本添加到头部
Posted
技术标签:
【中文标题】仅在不存在时将脚本添加到头部【英文标题】：only add script to head if doesn't exist 【发布时间】：2013-04-05 22:38:35 【问题描述】：我想在加载特定 div 时向我的网站添加其他脚本和样式。
我首先定义脚本或样式表的路径，然后创建一个元素。此后，我将元素附加到 html 中的 head 标签。
但我想在再次追加之前查看脚本或样式表是否已经追加。附加一个已经存在的脚本或样式表是愚蠢的。
问：如何使用javascript检查head标签中是否已经存在脚本，如果不存在则追加元素？
编辑
我根据@KernelPanik 的回答制作了一个函数。它还没有工作，但希望它会。该功能目前有问题：my script appending function doesn't work
【问题讨论】：
你可以在你的 script/style/link 标签上放一个 id 并检查它是否存在。 @Vatev 唯一的问题是只有部分浏览器支持 怎么样？所有浏览器都支持 document.scripts 或 document.getElementsByTagName("script") 及其属性getElementById 适用于任何标签，您只需要在创建时设置 id。
【参考方案1】：
如果你会用jquery，这段代码就不错了
function appendScript(filepath)
if ($('head script[src="' + filepath + '"]').length > 0)
return;
var ele = document.createElement('script');
ele.setAttribute("type", "text/javascript");
ele.setAttribute("src", filepath);
$('head').append(ele);
function appendStyle(filepath)
if ($('head link[href="' + filepath + '"]').length > 0)
return;
var ele = document.createElement('link');
ele.setAttribute("type", "text/css");
ele.setAttribute("rel", "Stylesheet");
ele.setAttribute("href", filepath);
$('head').append(ele);
在你的代码中写
appendScript('/Scripts/myScript.js');
appendStyle('/Content/myStyle.css');
【讨论】：
HTML5 不再需要“text/javascript”属性 可爱！如果开发者需要自己添加 jQuery 怎么办？这里不是香草javascript最佳解决方案吗？【参考方案2】：var lib = '/public/js/lib.js';
if (!isLoadedScript(lib))
loadScript(lib);
// Detect if library loaded
function isLoadedScript(lib)
return document.querySelectorAll('[src="' + lib + '"]').length > 0
// Load library
function loadScript(lib)
var script = document.createElement('script');
script.setAttribute('src', lib);
document.getElementsByTagName('head')[0].appendChild(script);
return script;
【讨论】：
【参考方案3】：您可以使用 DOM getElementsByTagName("script") 来获取文档中的所有 <script> 标记。然后，您可以检查返回的每个脚本标记的 src url，以获取已添加到 head 部分的脚本的 url。同样，您可以通过将“script”的搜索替换为“style”来对样式表执行类似的操作。
例如，如果附加到<head> 部分的脚本的url 是header_url.html
var x = document.getElementsByTagName("script");
var header_already_added = false;
for (var i=0; i< x.length; i++)
if (x[i].src == "header_url.html")
// ... do not add header again
header_already_added = true;
if (header_already_added == false)
// add header if not already added
同样，如果附加到<head>部分的样式的url是header_style.css
var x = document.getElementsByTagName("style");
var header_already_added = false;
for (var i=0; i< x.length; i++)
if (x[i].src == "header_style.css")
// ... do not add header again
header_already_added = true;
if (header_already_added == false)
// add header if not already added
这里也有人问过类似的问题：Check if Javascript script exists on page
【讨论】：
我喜欢这个答案，但未能将它与 Chrome 一起使用，因为 Chrome 会在使用相对路径的情况下添加"http://localhost/"，例如test.js。我现在使用x[i].getAttribute('src')【参考方案4】：
我使用了 Jack Lee 的解决方案。它很容易实现并且几乎可以使用任何类型的文件快速通用......我没有扩展任何东西......我实际上可能有点惊呆了......只是想列出我所做的事情以防它帮助某人否则……
var lib_jq = '//pathtofile/jquery.js';
var lib_bs = '//pathtofile/bootstrap.min.3.5.js';
var lib_cs = '//pathtofile.css';
///checks files with the SRC attribute
function isLoadedScript(lib)
return document.querySelectorAll('[src="' + lib + '"]').length > 0
///checks files with the HREF attribute
function isLoadedCss(lib)
return document.querySelectorAll('[href="' + lib + '"]').length > 0
///loads the script.js files
function loadScript(link)
document.write('<scr' + 'ipt type="text/javascript" src="'+link+'"></scr' + 'ipt>');
///loads the style.css files
function loadCss(link)
document.write('<link rel="stylesheet" href="'+link+'">');
/// run funtion; if no file is listed, then it runs the function to grab the URL listed. ///Run a seperate one for each file you wish to check.
if (!isLoadedScript(lib_jq)) loadScript(lib_jq);
if (!isLoadedScript(lib_bs)) loadScript(lib_bs);
if (!isLoadedCss(lib_cs)) loadCss(lib_cs);
I know there is always a "better" and more "elegant" solution, but for us beginiers, we got to get it working before we can start to understand it...
【讨论】：
【参考方案5】：另一种使用下面的函数助手的方法
function isScriptAlreadyPresent(url)
var scripts = Array.prototype.slice.call(document.scripts);
return scripts.some(function(el)
return el.src && el.src != undefined && el.src == url;
);
isScriptAlreadyPresent('http://your_script_url.tld/your_lib.js');
它使用Array.prototype.some 函数。如果您使用的浏览器不支持 ES5（IE7 和 IE8...），您可能需要 es5-shim
【讨论】：
【参考方案6】：也许headjs可以帮助你。
或者您可以在脚本标签中添加 onload 属性。
我的英语有点差，所以我可能误解了你的问题。
if(ie)
js.onreadystatechange = function()
if(js.readyState == 'complete')
callback(js);
else
js.onload = function()
callback(js);
【讨论】：
问题不在于添加脚本.. 它是检测它的存在，然后如果它们不存在则附加脚本。 like js.onload=function()alert('loaded');【参考方案7】：你可以尝试从那个js脚本文件中调用一些函数、对象、变量，如果找到它就存在，如果没有，你需要插入那个js脚本文件。
【讨论】：
以上是关于仅在不存在时将脚本添加到头部的主要内容，如果未能解决你的问题，请参考以下文章