檢查腳本是否存在頁面

我有一個我已經制作的書籤，它從我的服務器上加載一個腳本到用戶當前頁面。不過，我有一個如果檢查我的腳本，如果條件不滿足，則不採取任何行動。但是，如果用戶滿足該條件，那麼代碼將運行，但已導致在其頁面中插入兩組腳本。我可以預防嗎？檢查腳本是否存在頁面

<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

檢查腳本是否存在頁面

回答

相關問題