我正在执行一个外部脚本,使用<脚本>内<头>。

现在,由于脚本在页面加载之前执行,我不能访问<body>等。我想在文档被“加载”(HTML完全下载并在ram中)后执行一些JavaScript。是否有任何事件,我可以挂钩到当我的脚本执行,这将在页面加载触发?


当前回答

有一个关于如何使用Javascript或Jquery检测文档是否已加载的非常好的文档。

使用本地Javascript可以实现这一点

if (document.readyState === "complete") {
 init();
 }

这也可以在区间内完成

var interval = setInterval(function() {
    if(document.readyState === 'complete') {
        clearInterval(interval);
        init();
    }    
}, 100);

由Mozilla编写

switch (document.readyState) {
  case "loading":
    // The document is still loading.
    break;
  case "interactive":
    // The document has finished loading. We can now access the DOM elements.
    var span = document.createElement("span");
    span.textContent = "A <span> element.";
    document.body.appendChild(span);
    break;
  case "complete":
    // The page is fully loaded.
    console.log("Page is loaded completely");
    break;
}

使用Jquery 仅检查DOM是否准备就绪

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

要检查是否加载了所有资源,请使用window.load

 $( window ).load(function() {
        console.log( "window loaded" );
    });

其他回答

使用此代码与jQuery库,这将工作得很好。

$(window).bind("load", function() { 

  // your javascript event

});

这些解决方案是有效的:

正如注释中提到的,使用defer:

<script src="deferMe.js" defer></script>

or

<body onload="script();">

or

document.onload = function ...

甚至

window.onload = function ...

请注意,最后一个选项是更好的方法,因为它不引人注目,而且被认为更标准。

您可以在特定的脚本文件上编写函数,并使用onload属性将其调用到body元素中。

示例:

<script>
  afterPageLoad() {
   //your code here
}
</script>

现在调用你的脚本到你的html页面使用script标签:

<script src="afterload.js"></script>

融入你的身体元素;像这样添加onload属性:

<body onload="afterPageLoad();">

只需定义<body onload=" function ()>,它将在页面加载后被调用。脚本中的代码被function(){}括起来。

如果脚本是在文档的<head>中加载的,那么可以在script标记中使用defer属性。

例子:

<script src="demo_defer.js" defer></script>

从https://developer.mozilla.org:

推迟 此布尔属性被设置为向浏览器指示脚本 意味着在解析文档之后执行,但在解析之前 发射DOMContentLoaded。内 如果src 属性不存在(即对于内联脚本),在这种情况下它会 没有效果。 为实现动态插入脚本使用的类似效果 异步= false。具有defer属性的脚本将在 它们在文档中出现的顺序。