页面生命周期：DOMContentLoaded, load, beforeunload, unload

最新推荐文章于 2024-01-27 13:40:58 发布
最新推荐文章于 2024-01-27 13:40:58 发布
阅读量1k 收藏 4
点赞数 1
分类专栏： 前端开发 web前端 文章标签： 页面生命周期 DOMContentLoaded load
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/miao_9/article/details/88061946
版权
本文详细介绍了HTML页面的生命周期，包括DOMContentLoaded事件、window.onload事件、window.onunload事件和window.onbeforeunload事件。DOMContentLoaded事件在DOM树构建完毕后触发，允许JavaScript访问所有DOM节点。window.onload则等待所有资源加载完毕，包括图片和样式表。window.onbeforeunload和window.onunload分别在用户离开页面前和离开后触发，可用于提示用户保存更改。同时，文章还讨论了readyState属性在跟踪页面加载状态中的作用。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

HTML页面的生命周期有以下三个重要事件：

  • DOMContentLoaded —— 浏览器已经完全加载了HTML，DOM树已经构建完毕，但是像是 和样式表等外部资源可能并没有下载完毕。
  • load —— 浏览器已经加载了所有的资源（图像，样式表等）。
  • beforeunload/unload-—— 当用户离开页面的时候触发。

每个事件都有特定的用途

  • DOMContentLoaded —— DOM加载完毕，所以js可以访问所有DOM节点，初始化界面。
  • load —— 附加资源已经加载完毕，可以在此事件触发时获得图像的大小（如果没有被在HTML/CSS中指定）
  • beforeunload/unload —— 用户正在离开页面：可以询问用户是否保存了更改以及是否确定要离开页面。

DOMContentLoaded

DOMContentLoaded 由 document 对象触发。

我们使用addEventListener来监听它：


                

                
                
        

    

  


        

            

                

                

                了解本专栏
                
                
                  
                订阅专栏 解锁全文
                 
                
                    
                    超级会员免费看
                
            

            
            
            
        


    


                



	

		

			

				
					
页面生命周期：理解和应用JavaScript中的页面生命周期

				
			

			

				

					debug_bug142的博客
				

				

					10-06
					
					297
					
				

			

		

		

			
				
页面生命周期是指Web页面从加载到关闭的整个过程。在JavaScript中，页面生命周期由一系列事件组成，这些事件在页面的不同阶段触发。了解和掌握页面生命周期对于编写和管理交互式Web应用程序至关重要。在本文中，我们将详细介绍JavaScript中的页面生命周期，并提供相应的源代码示例。

			
		

	



                

            
              



	

		

			

				
					
浏览器中beforeunload的使用

				
			

			

				

					9年.NET撸码员，月薪5K
				

				

					07-30
					
					369
					
				

			

		

		

			
				

打开一些慢的网站的时候只见浏览器在不停转圈，但是页面还停留在当前页面的，有些网站的效果是你点击链接要跳到另一个页面的时候，在当前页面弹出一个框提示“正在加载中....”， 用到了浏览器的beforeunload事件，自己试了一下，以下代码可运行



源代码复制(IE有效)打印关于



<!DOCTYPE html>  
<html lang="en">  ...

			
		

	



              


  
              

                


	

		

			

				
					
在页面离开前提醒你的beforeunload事件

				
			

			

				

					前端队长Daotin
				

				

					10-20
					
					1999
					
				

			

		

		

			
				
文章目录问题描述解决办法代码示例特别提醒
问题描述
有些需要填写用户信息的界面，当用户点击返回，或者刷新界面，关闭界面的时候，需要及时提醒用户当前的页面填写了内容，如果返回或者刷新的话，会导致内容丢失。然后让用户自行决定后续的操作。
解决办法
beforeunload事件就可以帮你做到这件事。
当浏览器窗口关闭或者刷新时，会触发beforeunload事件。当前页面不会直接关闭，可以点击确定按钮关闭或刷新，也可以取消。
该事件使网页能够触发一个确认对话框 ，询问用户是否真的要离开该页面。如果用户确认，浏览器

			
		

	





	

		

			

				
					
load/domContentLoaded事件、异步/延迟Js 与DOM解析

				
			

			

				

					aiguanyi0149的博客
				

				

					02-05
					
					838
					
				

			

		

		

			
				
一、DOMContentLoaded 与 load事件
关于load和DOMContentLoaded事件，mdn对于它们是这样描述的：
DOMContentLoaded
mdn文档地址:https://developer.mozilla.org/zh-CN/docs/Web/Events/DOMContentLoaded
The DOMContentLoaded event is fi...

			
		

	



		

			
		



	

		

			

				
					
DOMContentLoaded与onload加载顺序

				
			

			

				

					逆水行舟
				

				

					11-25
					
					3512
					
				

			

		

		

			
				
window.onload = function() {     init();     doSomethingElse();   };  

>    html>    head>      title>onload testtitle>      script>        function load() {           alert("load event detected!")

			
		

	





	

		

			

				
					
beforeunload事件

				
			

			

				

					luoage的专栏
				

				

					11-03
					
					3146
					
				

			

		

		

			
				
之所以有发生在window对象上的beforeunload事件，是为了让开发人员有可能在页面卸载前阻止这一操作。这个事件的意图是将控制权交给用户。显示的消息会告知用户页面行将被卸载，询问用户是否真的要关闭页面，还是希望继续留下来。


为了显示这个弹出对话框，必须将event.returnValue的值设置为要显示给用于的字符串，如下面的例子所示：

var EventUtil = {
    g

			
		

	





	

		

			

				
					
深入理解HTML页面生命周期：DOMContentLoaded, load, beforeunload, unload

				
			

			

				

					
				

			

		

		

			
				
本文主要探讨JavaScript页面的生命周期，重点介绍四个关键阶段：DOMContentLoaded、load、beforeunload和unload。HTML页面在浏览器加载过程中会经历这些阶段，每个阶段都有其特定的任务和用途。  1. **...

			
		

	





	

		

			

				
					
js页面生命周期1

				
			

			

				

					08-08
				

			

		

		

			
				
页面生命周期中的JavaScript事件是Web开发中至关重要的概念，尤其是在创建交互式和响应式的网页时。这些事件允许开发者在特定的时间点对页面进行操作，以确保正确地处理用户交互和资源加载。本文将深入探讨其中的四...

			
		

	





	

		

			

				
					
【基础篇1】JavaScript页面生命周期

				
			

			

				

					m0_52243921的博客
				

				

					11-18
					
					1146
					
				

			

		

		

			
				
HTML页面基础篇：页面生命周期方法

			
		

	





	

		

			

				
					
JS事件—unload、beforeunload

					
热门推荐

				
			

			

				

					mtgr的博客
				

				

					10-10
					
					2万+
					
				

			

		

		

			
				
unload和beforeunload是在窗口卸载的时候会触发，可以在用户刷新或者关闭窗口的时候处理一些逻辑，如果在两个事件监听中添加 alert、confirm、prompt会忽略，所以我们想提示用户或者想调试一下这种方法是不可行的，要是在事件中添加debugger，窗口关闭的时候可以跟进断点，但是刷新的时候断点也被忽略了。废话少说直接上测试代码


//以两种方式去绑定事件，事件触发写...

			
		

	





	

		

			

				
					
js之beforeunload事件

				
			

			

				

					sinat_41747081的博客
				

				

					04-13
					
					2282
					
				

			

		

		

			
				
有时候点击刷新按钮时，想要弹出重新加载此网站的提示：
如google浏览器：

可以使用js的beforeunload事件
componentDidMount(): void {
	window.onbeforeunload = () => {
		e = e || window.event;
	    // 兼容IE8和Firefox 4之前的版本
	    if (e) {
	     ...

			
		

	





	

		

			

				
					
DOMContentLoaded事件

				
			

			

				

					好男儿今生不后悔
				

				

					10-12
					
					397
					
				

			

		

		

			
				
DOMContentLoaded事件

时间：2014-06-16



  过去,当一个页面完成加载时,初始化脚本的方法是使用load事件,但这个类函数的缺点是仅在所有资源都完全加载后才被触发,这有时会导致比较严重的延迟,开发人员随后创建了一种自定义事件,domready,它在DOM加载之后及资源加载之前被触发.
  domready事件迅速被众多JavaScript库所采用,它开

			
		

	





	

		

			

				
					
Window.onLoad 和 DOMContentLoaded事件的先后顺序

				
			

			

				

					weixin_30606461的博客
				

				

					01-12
					
					352
					
				

			

		

		

			
				
相信写js的，都知道window.onload吧，但是并不是每个人都知道DOMContentLoaded，其实即使你不知道，很有可能你也经常使用了这个东西。
   一般情况下，DOMContentLoaded事件要在window.onload之前执行，当DOM树构建完成的时候就会执行 DOMContentLoaded事件，而window.onload是在页面载入完成的时候，才执行，这其中包...

			
		

	





	

		

			

				
					
javascript基础学习系列二百七十八：beforeunload 事件

					
最新发布

				
			

			

				

					wanmeijuhao的博客
				

				

					01-27
					
					1651
					
				

			

		

		

			
				
beforeunload 事件会在 window 上触发，用意是给开发者提供阻止页面被卸载的机会。这个事件会在页面即将从浏览器中卸载时触发，如果页面需要继续使用，则可以不被卸载。这个事件不能取消， 否则就意味着可以把用户永久阻拦在一个页面上。相反，这个事件会向用户显示一个确认框，其中的消 息表明浏览器即将卸载页面，并请用户确认是希望关闭页面，还是继续留在页面上。

			
		

	





	

		

			

				
					
vue实现浏览器关闭或刷新弹窗提示（beforeunload/unload)

				
			

			

				

					灵境引路人
				

				

					11-14
					
					8165
					
				

			

		

		

			
				
vue实现浏览器关闭或刷新弹窗提示（beforeunload/unload)

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  





	
打赏作者

	

		

		
			
		
		

		

			
庭一

			
你的鼓励将是我创作的最大动力

		

	

	

			

	

	

    ¥1
    ¥2
    ¥4
    ¥6
    ¥10
    ¥20
	

	

		

			

				

					扫码支付：¥1
				

				

					

					
					获取中
					

				

				

					
					
					扫码支付
				

			

		

		

			
您的余额不足，请更换扫码支付或充值

			
打赏作者

		

	



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值