只在點擊事件中加載腳本一次

我在黑客一起香草JavaScript加載外部腳本點擊事件。只在點擊事件中加載腳本一次

var searchLabel = document.getElementById('search-toggle-label'); 
searchLabel.onclick = function(){ 
    var script = document.createElement("script"); 
    script.type = "text/javascript"; 
    script.src = "wp-content/themes/2016/js/cse.js."; 
    document.getElementsByTagName("head")[0].appendChild(script); 
    return false; 
}

但它每次點擊事件時都會一直加載相同的腳本。

所以我扔了一條if語句來檢查值爲&的類型。「===」

var searchLabel = document.getElementById('search-toggle-label'); 
if (typeof searchLabel === 'undefined') { 
    searchLabel.onclick = function() { 
     var script = document.createElement("script"); 
     script.type = "text/javascript"; 
     script.src = "wp-content/themes/2016/js/cse.js."; 
     document.getElementsByTagName("head")[0].appendChild(script); 
     return false; 
    } 
} 
else { 
    alert('loaded already'); 
}

顯然，這是錯誤的，因爲我得到的點擊活動頁面加載&警報，腳本不會加載。

我很難過。我知道有一個簡單的解決方案使用jQuery，但我試圖實際學習編寫javascript。

任何幫助將不勝感激。

來源

2016-03-05 HackYa

你想做什麼就做什麼？只在第一次點擊時加載腳本？ – Cymen

是的。只在第一次點擊時加載腳本，而不是後續點擊。 – HackYa

刪除事件偵聽器一旦觸發：

var searchLabel = document.getElementById('search-toggle-label'); 
searchLabel.addEventListener('click', loadScript, false); 

function loadScript(){ 
    var script = document.createElement("script"); 
    script.type = "text/javascript"; 
    script.src = "wp-content/themes/2016/js/cse.js."; 
    document.getElementsByTagName("head")[0].appendChild(script); 
    searchLabel.removeEventListener('click', loadScript, false); 
    return false; 
}

來源

2016-03-05 00:20:26 Malk

對不起大衛沃爾什。你的包裝很好地工作，但上面的腳本對我來說更簡潔。所以我要和馬克一起去。謝謝！我實際上曾嘗試添加.removeEventLister，我明白爲什麼它不起作用;因爲我試圖在它被解僱之前將其刪除。 – HackYa

添加一個函數以返回true/false，如果腳本存在於DOM中。這裏是一個：

function isScriptLoaded(src) { 
    return !!Array.prototype.filter.call(document.getElementsByTagName('script'), function(node) { 
    return node.src === src; 
    }); 
}

然後使用它來測試腳本是否已經插入DOM。

來源

2016-03-05 00:14:49 Cymen

不是。不太清楚你的意思是「匹配腳本src的後綴/結尾」，但你的正則表達式？「srcSuffix $」（不知道這是什麼）無法阻止後續加載腳本。 – HackYa

@HackYa是的，我犯了一個錯誤 - 我會解決它。 – Cymen

@HackYa我修復了這個錯誤 – Cymen

也許嘗試在函數定義之前設置一個標誌。這樣你就可以在函數開始時檢查標誌，並省略其他標誌。你在互聯網上找到了一個很好的例子。看看這個solution。

來源

2016-03-05 00:17:22

謝謝。沒有使用David Walsh的包裝功能，它確實有效。但是，Malk的刪除EventlListner的方法似乎更適合我？ – HackYa

你說得對，那種方法更好。所以去那個。 –

只在點擊事件中加載腳本一次

回答

相關問題