頁面加載完成后調用 javascript function？

Question

我在我們的 html 頁面中使用 CookieBot。 CookieBot javascript 無法在測試環境中加載並引發net::ERR_ABORTED 404錯誤。

發生這種情況時，頁面中的加載微調器會在頁面加載完成后繼續顯示。

在頁面加載完成后，我嘗試了以下選項來調用偵聽器。 但它們都不起作用：

document.addEventListener("load", (e) => {
    console.log("document load");
});

document.addEventListener("DOMContentLoaded", function(event) {
    console.log("DOMContentLoaded");
});

$(document).ready(function() {
    console.log("ready!");
});

$(document).ready(function() {
    console.log("document is ready");
});

$(window).on("load", function(){
    console.log("window load!");
});

window.onload = function () {
    console.log("window onload!");
};

我猜 CookieBot 腳本會覆蓋我的聽眾。 這是一個未調用偵聽器的示例。 當您刪除 CookieBot 腳本時，它會運行： https://jsfiddle.net/hkarakose/4by26Lr3/1/

頁面加載完成后如何調用 function？

Answer 1

我習慣使用document.addEventListener("load", (e) => {console.log("loaded"); })

您能否向我們展示更多代碼以查看您的問題是否在這里？ 我認為你所有的測試都是正確的，我不明白為什么它不起作用。

Answer 2

您可以在頁面加載后調用 function：

window.onload = function() {
 //here you can write your function and invoke it.
}

編輯：

也許我不明白你的要求，但現在我讀得更仔細了。

問題出在劇本上，對吧？ 如果您在 HEAD 上插入腳本，它將首先加載。

您可以通過這種方式插入腳本的類型：type = "text / plain" 和 data-attribute：data-attribute = "script-cookie"。

然后在加載完所有內容后更改類型，如下所示：

window.onload = function () {
       var allPrefScript = document.querySelectorAll ("script [data-attribute =" script-cookie "]");
allPrefScript [0] .setAttribute ("type", "text / javascript");
}

Answer 3

盡管@davilink92 的回答有效，但我以更實際的方式解決了這個問題。

我將外部腳本加載附加到 window 加載事件：

window.addEventListener('load', function () {
    $.getScript("https://consent.cookiebot.com/uc.js?cbid=d180eb7a-8f13-4549-bacc-6d4a6dfb5da8&culture=en");
    $("#global-loader").fadeOut("slow");
});

這樣，腳本就無法阻止瀏覽器調用 window 加載事件監聽器。 因此，我能夠在頁面加載后移除加載微調器。