检查页面上是否存在 Javascript 脚本答案

【问题标题】：Check if Javascript script exists on page检查页面上是否存在 Javascript 脚本
【发布时间】：2012-03-28 09:24:19
【问题描述】：

我制作了一个书签，它将我的服务器中的脚本加载到用户当前页面上。但是，我的脚本中有一个 if 检查，如果不满足条件，则不采取任何措施。但是，如果用户随后满足该条件，则代码会运行，但会导致将两组脚本插入到他们的页面中。我可以防止这种情况吗？

 <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>

【问题讨论】：

标签： javascript

【解决方案1】：

你可以像这样检查你的脚本是否被加载：

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 方案适用于小书签，但在这种情况下，这并不是正常使用的好习惯。

【讨论】：

哦，好的，现在创建书签的现代方法是什么？
这很好，我错过了它之前是一个书签的事实......让我以有意义的方式重新添加它
一些脚本可能会在 URL 末尾添加随机查询字符串，因此更好的解决方案是使用包含函数而不是 '==' 运算符。
如果您引用内部资源，检查scripts[i].src 会有一些危险。至少 Chrome 会在使用相对路径的情况下添加“localhost”，例如test.js。我现在使用scripts[i].getAttribute('src')

【解决方案2】：

只需检查选择器长度。这是一个使用 jQuery 的示例：

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

【讨论】：

【解决方案3】：

您可以在您的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'
}

【讨论】：

【解决方案4】：

使用 ES6 的解决方案，没有 jQuery：

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

【讨论】：

【解决方案5】：

如果与当地工作并交替居住。

确切的 URL 可能会改变。我认为ID方法更好。

这是两个 StackOverflow 答案的组合。

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

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

【讨论】：

【解决方案6】：

if (document.getElementById('element-id')) {
// if exist must do something 
}

你好，这对我有用，如果你仍然需要它，请尝试一下

【讨论】：

请修正您的格式错误（} 在代码块之外）和您的错字（plesea）

【解决方案7】：

如果您在全局范围 (window.yourVariable) 中创建一个变量并检查它是否已经存在，那么您可以决定是否要添加您的 jsCode sn-p 代码或运行您在 script.js 中运行的任何内容

【讨论】：