检查脚本是否存在页面

我有一个我已经制作的书签，它从我的服务器上加载一个脚本到用户当前页面。不过，我有一个如果检查我的脚本，如果条件不满足，则不采取任何行动。但是，如果用户满足该条件，那么代码将运行，但已导致在其页面中插入两组脚本。我可以预防吗？检查脚本是否存在页面

<a href="javascript: (function() { 
    var jsCode = document.createElement('script'); 
    jsCode.setAttribute('src', 'http://xxx.co.uk/xxx/script.js'); 
    document.body.appendChild(jsCode); 
}());">Bookmarklet</a>

来源

2012-03-11 benhowdle89

您可以检查您的脚本是否加载这样的：

function isMyScriptLoaded(url) { 
    if (!url) url = "http://xxx.co.uk/xxx/script.js"; 
    var scripts = document.getElementsByTagName('script'); 
    for (var i = scripts.length; i--;) { 
     if (scripts[i].src == url) return true; 
    } 
    return false; 
}

或者，你可以做这样的事情：

<a href="javascript: 
    if (!jsCode) { 
     var jsCode = document.createElement('script'); 
     jsCode.setAttribute('src', 'http://xxx.co.uk/xxx/script.js'); 
     document.body.appendChild(jsCode); 
    } 
">Bookmarklet</a>

这个“污染”全局命名空间的变量为jsCode，但这可能是一个必要的罪恶。您可以将其重命名为不太可能出现在运行书签的文档中。

请注意，虽然javascript URI方案是好的，为的bookmarklet在这种情况下，它不被认为是正常使用一个很好的做法。

来源

2012-03-11 22:00:11

噢好吧，什么是现代的方式来创建bookmarklets现在一天？ – benhowdle89 2012-03-11 22:05:04

这很好，我错过了早些时候它是一个小书签的事实......让我以一种有意义的方式重新添加它 – 2012-03-11 22:10:16

如果您创建在全球范围内（window.yourVariable）一个变量，并检查是否存在已经那么你可以决定是否要添加任何你在运行的script.js您jsCode代码片段或运行

来源

2012-03-11 21:59:55 voigtan

只需检查选择器的长度。下面是使用jQuery的例子：

if ($('script[src="http://xxx.co.uk/xxx/script.js"]').length > 0) { 
    //script exists 
}

来源

2014-02-19 20:51:29

你可以把你的script标签id属性和使用document.getElementById('your-id')识别脚本是在页面上添加之前。

if (!document.getElementById('your-id')) { 
    // append your script to the document here, ensure it has its id attribute set to 'your-id' 
}

来源

2016-08-08 17:12:09

在与本地和现场交替的情况下工作。

具体URL也许改变。我认为ID方法更好。

这是两个堆栈溢出答案的组合。

与ES6，没有jQuery的

if (!document.getElementById('your-id')) { 
     addScript("your_script_src"); //adding script dynamically 
    } 

    function addScript(path) { 
     var head = document.getElementsByTagName("head")[0]; 
     var s = document.createElement("script"); 
     s.type = "text/javascript"; 
     s.src = path; 
     s.id = "your-id"; 
     head.appendChild(s); 
    } 

function addCSSFile(path) { 
    var head = document.getElementsByTagName("head")[0]; 
    var s = document.createElement("style"); 
    s.type = "text/css"; 
    s.src = path; 
    head.appendChild(s); 
}

来源

2017-01-20 06:59:44

解决方案：

const url = 'http://xxx.co.uk/xxx/script.js'; 

function scriptExists(url) { 
    return document.querySelectorAll(`script[src="${url}"]`).length > 0; 
} 

if(scriptExists(url){ 
    ... 
}

它不建议内联JS成HTML。相反，添加事件监听器：

function bookmark() { 
    if(scriptExists(url){ 
    ... 
    } 
} 

document.querySelectorAll('a.bookmark').addEventListener('click', 
bookmark, false);

来源

2017-04-12 02:20:40

检查脚本是否存在页面

回答

相关问题