如何使Alert（）;页面完全加载后显示？

我的背景：我是JavaScript新手。我以前使用过一些Jquery，但我试图在不使用库的情况下学习纯粹的vanilla Javascript。如何使Alert（）;页面完全加载后显示？

我的软件：我正在使用最新的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);

来源

2017-06-22 Los

'window.onload'应该工作 – Satpal

@Satpal需要明确的是，我的更新的Javascript应该是这样的吧？ 'var message =“欢迎来到我的网站！”; window.onload = function（）{ alert（message）; };' – Los

您可以尝试

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

来源

2017-06-22 05:57:00 SDhaliwal

通过阅读jQuery源代码，并进一步调查Mozilla guide，你应该听的DOMContentLoaded事件：当最初的HTML文档完全加载和解析

的DOMContentLoaded事件被触发，而无需等待样式表，图像，子帧完成加载。应该只使用非常不同的事件负载来检测完全加载的页面。这是令人难以置信的流行的错误使用负载DOMContentLoaded将更适合，所以要谨慎。

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

来源

2017-06-22 06:02:40 Oliver

如何使Alert（）;页面完全加载后显示？

回答

相关问题