在页面加载完成后调用javascript函数？

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/

页面加载完成后如何调用函数？

Answer 1

我有使用document.addEventListener("load", (e) => {console.log("loaded"); })的习惯

你能向我们展示更多的代码，看看你的问题在这里吗？我认为你所有的测试都是正确的，我不明白为什么它不工作。

Answer 2

您可以在页面加载后使用以下命令调用函数：

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

编辑：

也许我不理解你的请求，但现在我更仔细地阅读。

问题出在脚本中，对吧？如果您在HEAD上插入脚本，它将首先被加载。

您可以这样插入脚本的类型: type = "text / plain“with a 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.addEventListener('load', function () {
    $.getScript("https://consent.cookiebot.com/uc.js?cbid=d180eb7a-8f13-4549-bacc-6d4a6dfb5da8&culture=en");
    $("#global-loader").fadeOut("slow");
});

这样，脚本就不能阻止浏览器调用window load事件侦听器。因此，我可以在页面加载后删除加载微调器。