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

Question

我有一个我制作的书签,它将我的服务器上的脚本加载到用户当前页面.但是我在我的脚本中检查了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>

Answer 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变量"污染"全局命名空间,但这可能是必要的恶魔.您可以将其重命名为不太可能出现在运行书签的文档中的内容.

请注意,虽然javascriptURI方案适用于这种情况下的bookmarklet,但它不被认为是正常使用的好习惯.

Answer 2

只需检查选择器长度.这是使用jQuery的一个例子:

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

Answer 3

您可以id在script标记上放置属性,并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'
}

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