如何將腳本標簽加載為 DOM 元素並像放置在頭標簽中一樣運行
[英]How load script tag as DOM element and run as if it was placed in head tag
問題描述
我正在尋找一種方法來加快站點加載並推遲非緊急腳本。 我需要在按鈕單擊時加載一個腳本，因為它放置在 Head 標記 <script...> 中。
async function do_script_load() {
var script = document.createElement("script");
script.src = "https://web.webformscr.com/apps/fc3/build/loader.js";
script.type = "text/javascript";
script.setAttribute("async", "");
await item.parentElement.querySelector(".n-bell-bubble").appendChild(script);
do_other_stuff();
}
addEventListener( "click" , () => {
do_script_load()
})
問題是腳本已加載但尚未啟動。 我正在尋找一種方法來將腳本作為以前添加的腳本運行。
<head>
<script src="..." async></script>
1 個解決方案
解決方案1
1 已采納 2022-01-25 09:12:40
您正在加載的腳本正在偵聽要執行的窗口load事件。
（來自https://web.webformscr.com/apps/fc3/build/loader.js ）
window.addEventListener("load",e,!1)
當您執行 append 腳本時，此事件會長時間觸發，因此它將等待已經發生的事情。
您可以通過在<script>上添加load事件處理程序來快速解決此問題，並在發生這種情況時在 window 上觸發新的load事件：
script.addEventListener("load", e => window.dispatEvent(new Event("load")));
雖然我們似乎需要頁面中的其他一些元素，這些元素具有我不知道的sp-form-id屬性，因此無法測試自己。
但是如果你能聯系到你加載的這個腳本的作者，那么你應該要求他們公開一個方法來初始化它而不必觸發這個事件，因為你頁面的其他部分很可能依賴於這個事件是只應該開火一次。
另請注意，您可能希望將{ once: true }選項傳遞給您的click偵聽器，以避免在用戶每次點擊時加載此腳本。
如何在特定腳本標記之后將腳本標記添加到頭部
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.