如何发出警报（）； 页面完全加载后显示？
[英]How to Make Alert(); Show After Page is Fully Loaded?
问题描述
My Background: I am new to Javascript. I have used a bit of Jquery before, but I am trying to learn pure vanilla Javascript without using a library.
我的背景：我是 Javascript 的新手。我以前用过一点 Jquery，但我想在不使用库的情况下学习纯香草 Javascript。
My Software: I am using the latest Brackets text editor along with the latest version of Safari.我的软件：我正在使用最新的 Brackets 文本编辑器以及最新版本的 Safari。
The Problem: I am trying to show an alert();问题：我正在尝试显示一个alert(); after the page is fully loaded and displayed.页面完全加载并显示后。 The alert always runs before the page is displayed.警报始终在页面显示之前运行。 The page displays only after I close the alert.该页面仅在我关闭警报后显示。
My Research: I have tried many different solutions, almost none of them seem to work;我的研究：我尝试了很多不同的解决方案，几乎没有一个似乎有效； however, when a solution DOES work, some of my other Javascript statements stop working.但是，当解决方案确实有效时，我的其他一些 Javascript 语句将停止工作。 I have tried the following solutions:我尝试了以下解决方案：
Putting my script tags at the bottom of the page
将我的脚本标签放在页面底部<body> <.--Body content--> <script src="javascript.js"></script> </body>Creating an unload event in my.js file
在 my.js 文件中创建卸载事件window.onload = function(){ alert("My alert;"); }Creating a
readystatechangeevent and checking the current document.readystate in my.js file创建readystatechange事件并检查 my.js 文件中的当前 document.readystatedocument.onreadystatechange = function(){ if(document.readyState=='loaded' || document.readyState=='complete') alert("My alert;"); }I've even tried methods not involving my.js file such as
我什至尝试过不涉及 my.js 文件的方法，例如<head> <script> function myFunction(){ alert("My alert;"); } </script> </head> <body onload="myFunction()"> <!--Body content--> </body>
Closest Answer: The only thing close to working is putting the async attribute in my script tag like...最接近的答案：唯一接近工作的是将async属性放在我的脚本标记中，例如...
<script src="Javascript-101.js" async></script>
However, a few weird things happen when I do this:但是，当我这样做时会发生一些奇怪的事情：
- When I include the
asyncattribute, it works!当我包含async属性时，它起作用了！ Thealert();alert();is shown after the page is displayed... BUT mydocument.write();在显示页面后显示...但是我的document.write();statements stop working, regardless of whether I put my script in the head of my HTML document or before the closing</body>tag.语句停止工作，无论我是将脚本放在 HTML 文档的头部还是在结束</body>标记之前。 - When I exclude the
asyncstatement with my script located in the head of my HTML document, it does not work... thealert();当我使用位于 HTML 文档头部的脚本排除async语句时，它不起作用......alert();is shown before the page is displayed.在显示页面之前显示。 Additionally, it makes my Math.sqrt(64);此外，它使我的Math.sqrt(64);statement stop working.语句停止工作。 However, my document.write();但是，我的document.write();statements work just fine.陈述工作得很好。 - When I exclude the
asyncstatement with my script located before the closing</body>tag, it does not work... thealert();当我使用位于结束</body>标记之前的脚本排除async语句时，它不起作用......alert();is shown before the page is displayed.在显示页面之前显示。 All of my other statements work just fine in this scenario.在这种情况下，我的所有其他陈述都可以正常工作。
My HTML Code:我的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>
My Javascript:我的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);
4 个解决方案
解决方案1
0 2017-06-22 05:57:00
You can try 你可以试试
var myFunc = function(){
alert("My alert!");
}
:
:
window.attachEvent('onload', myFunc);
解决方案2
0 2017-06-22 06:02:40
By reading the jQuery source code and further investigating the Mozilla guide , you should listen for the DOMContentLoaded event: 通过阅读jQuery源代码并进一步调查Mozilla指南 ，您应该监听DOMContentLoaded事件：
The DOMContentLoaded event is fired when the initial HTML document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading.
<script>
document.addEventListener("DOMContentLoaded", function(event) {
console.log("DOM fully loaded and parsed");
});
</script>
解决方案3
0 2019-04-06 05:27:54
I did it using jquery as following 我使用jquery做了如下
$(window).ready(function(){
alert("lalalala");
});
you will see the refresh of the page anyways, but it will keep loading even after the alert is triggered. 无论如何你都会看到页面的刷新，但即使在触发警报后它也会继续加载。 I tried using 我试过用
$(windows).on('load', function(){
alert();
});
since load is deprecated already, but no luck there, it should show the alert only after the refresh is finished but is your omages are cached it wont work and wont trigger the alert so, I sticked with "ready" 由于负载已经弃用，但没有运气，它应该只在刷新完成后显示警报但是你的omages被缓存它不会工作并且不会触发警报所以，我坚持“准备好”
解决方案4
0 2022-03-01 04:54:59
I did this and it work我这样做了并且有效
in html file:在 html 文件中：
<body onload="myFunction()">
...
<script src="javascript.js"></script>
</body>
then in the separate javascript file (javascript.js) we write:然后在单独的 javascript 文件 (javascript.js) 中我们写：
body.onload function myFunction() {
alert("My Alert!");
}
Note:笔记：
- Instead inside head tags, put the script at the last, at the bottom before the body close tag, because if the script is long, it will ensure all the body elements will fired first而不是在 head 标签内，将脚本放在最后，在 body 关闭标签之前的底部，因为如果脚本很长，它将确保所有 body 元素首先触发
- The problem, as I see it, you use "window" element, instead of "body" element in the javascript. As we know it, we must be consistent to avoid uncertainty.问题，正如我所看到的，您在 javascript 中使用了“window”元素，而不是“body”元素。正如我们所知，我们必须保持一致以避免不确定性。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.