如果不存在,只添加脚本到头部

Question

我想在加载特定div内容时为我的网站添加其他脚本和样式.我首先定义脚本或样式表的路径,然后创建一个元素.此后,我将元素附加到HTML中的head标记.

但是我想要一种方法来查看脚本或样式表是否已经附加,然后再添加它.附加已经存在的脚本或样式表是愚蠢的.

问:如何使用javascript检查head标签中是否已存在脚本,如果没有,则附加该元素？

编辑

我根据@KernelPanik的答案制作了一个函数.它还没有工作,但希望它会.该功能目前有问题:我的脚本追加功能不起作用

Answer 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');

Answer 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;
}

Answer 3

也许headjs可以帮助你。

或者您可以在 script 标签中添加 onload 属性。

我的英语有点差，所以也许我误解了你的问题。

if(ie){
  js.onreadystatechange = function(){
    if(js.readyState == 'complete'){
      callback(js);
  }
}
else{  
js.onload = function(){
  callback(js);
}