Question

我的背景：我是Javascript的新手。我之前使用过一些Jquery，但是我试图在不使用库的情况下学习纯粹的vanilla Javascript。

我的软件：我正在使用最新的Brackets文本编辑器以及最新版本的Safari。

问题：我试图在页面完全加载并显示后显示alert();。警报始终在页面显示之前运行。只有在我关闭警报后才会显示该页面。

我的研究：我尝试了很多不同的解决方案，几乎没有一种解决方案可行;但是，当解决方案正常工作时，我的一些其他Javascript语句将停止工作。我尝试了以下解决方案：

将我的脚本标记放在页面底部

<body>
<!--Body content-->
<script src="javascript.js"></script>
</body>

在我的.js文件中创建卸载事件

window.onload = function(){
    alert("My alert!");
}

创建readystatechange事件并检查我的.js文件中的当前document.readystate

document.onreadystatechange = function(){
    if(document.readyState=='loaded' || document.readyState=='complete')
        alert("My alert!");
}

我甚至尝试过不涉及我的.js文件的方法，例如

<head>
<script>
    function myFunction(){
        alert("My alert!");
    }
</script>
</head>

<body onload="myFunction()">
<!--Body content-->
</body>

最近回答：唯一接近工作的是将async属性放在我的脚本代码中，如...

<script src="Javascript-101.js" async></script>

然而，当我这样做时会发生一些奇怪的事情：

当我包含async属性时，它可以正常工作！显示页面后显示alert(); ...但是我的document.write();语句停止工作，无论我将脚本放在HTML文档的头部还是关闭之前</body>标签
当我使用位于HTML文档头部的脚本排除async语句时，它不起作用...在页面显示之前显示alert();。此外，它使我的Math.sqrt(64);语句停止工作。但是，我的document.write();语句工作正常。
当我使用位于结束async标记之前的脚本排除</body>语句时，它不起作用...在显示页面之前显示alert();。在这种情况下，我的所有其他陈述都可以正常工作。

我的HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="Javascript-101.css">
    <title>Intro to Javascript</title>
</head>
<body>
    <div class="container">
        <h1>Javascript has front-end and server-side applications.</h1>
    </div>
    <p id="math-answer"></p>
    <script src="Javascript-101.js"></script>
</body>
</html>

我的Javascript：

/*jslint devel: true, evil: true*/
var message = "Welcome to my website!";
alert(message);
document.write("<h2>Text #2 goes here.</h2>");
document.write("<p>Text #3 goes here.</p>");
console.log("Hello, console!");
document.getElementById("math-answer").innerHTML = Math.sqrt(64);

Answer 1

你可以尝试

var myFunc = function(){
  alert("My alert!");
}
:
:
window.attachEvent('onload', myFunc);

Answer 2

通过阅读jQuery源代码并进一步调查Mozilla guide，您应该听取DOMContentLoaded事件：

初始HTML文档具有时触发DOMContentLoaded事件已完全加载和解析，无需等待样式表，图像和子帧完成加载。一个非常不同的事件负载应该仅用于检测完全加载的页面。这是一个令人难以置信的使用负载的流行错误DOMContentLoaded会更多适当的，所以要小心。

<script>
  document.addEventListener("DOMContentLoaded", function(event) {
    console.log("DOM fully loaded and parsed");
  });
</script>

Answer 3

我使用jquery做到了

$(window).ready(function(){
alert("lalalala");
});

无论如何，您都会看到页面的刷新，但是即使在触发警报后，它也会继续加载。我尝试使用

$(windows).on('load', function(){
alert();
});

由于已经弃用了负载，但是那里没有运气，因此它应该仅在刷新完成后才显示警报，但是如果缓存了您的文件，它将无法工作并且不会触发警报，因此，我坚持使用“就绪”

如何制作警报（）;显示页面完全加载后？

3 个答案: