你知道document的四个生命周期区别吗？

原创已于 2024-07-22 11:55:53 修改 · 891 阅读

14 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #html5 #css #javascript #html

于 2024-07-02 15:28:55 首次发布

ECMAScript指南专栏收录该内容

10 篇文章

订阅专栏

前言

提示：我们通过对一个新页面的打开来探究页面的生命周期：

一、window.open语法？

open()
open(url)
open(url, target)
open(url, target, windowFeatures)
//target : _self、_blank、_parent 和 _top。
//windowFeatures :  限制窗口的属性：
// windowFeatures :  "left=100,top=100,width=320,height=320";

对新建的窗口添加回调

	
   let newWindow = window.open(window.location.origin, '_blank') as any;
    console.log(newWindow);
    newWindow.onload = function() {
       console.log("加载完成");
       newWindow.alert('callback');
    }
  }

二、document.write()

注意点:

document.write() 方法将文本字符串写入由 document.open() 打开的文档流。
document.write(exp1,exp2,exp3,....), 多参数会自动换行
多次调用会连续写入

<html lang="zh-CN">
  <head>
    <title>编写示例</title>

    <script>
      window.onload = newContent;
      function newContent() {
        document.write("<h1>旧的不去，新的不来！</h1>");
        document.open()
        document.write("<h1>主标题1</h1>");
        document.write("<h1>主标题123</h1>");
        document.close()
      }

    </script>
  </head>

  <body>
    <p>一些原始文档内容。</p>
  </body>
</html>

没有新开流

在这里插入图片描述

新开流

在这里插入图片描述

三、页面加载四大生命钩子

HTML 页面的生命周期包含四个重要事件：

DOMContentLoaded 事件 —— DOM 已经就绪，因此处理程序可以查找 DOM 节点，并初始化接口。
load 事件 —— 外部资源已加载完成，样式已被应用，图片大小也已知了。
beforeunload 事件 —— 用户正在离开：我们可以检查用户是否保存了更改，并询问他是否真的要离开。
unload 事件 —— 用户几乎已经离开了，但是我们仍然可以启动一些操作，例如发送统计数据。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>生命周期钩子示例</title>
</head>
<body>
    <h1>生命周期钩子示例</h1>
      <a href="baidu.com">离开当前网页跳去百度</a>
	  <br/>
	  <br/>
	  <br/>
    <img style ="width:400px" src="https://th.bing.com/th/id/R.8d52fd88fbacb0bc34afa0d3e3d3fbf0?rik=YLBGQ2YxYJczDg&riu=http%3a%2f%2fwww.08lr.cn%2fuploads%2fallimg%2f220330%2f1-2300134436.jpg&ehk=h6QkPS87X6L6Vb7h5F10YmPZlLWLGKOMcKNcY9zMLRA%3d&risl=&pid=ImgRaw&r=0" />
    <p>页面加载中，请稍候...</p>

    <script>
        // DOMContentLoaded 事件
        document.addEventListener('DOMContentLoaded', function() {
            console.log('DOM 已就绪，可以查找节点和初始化接口。');

            let img = document.getElementsByTagName('img')[0]
            console.log('获取img高度',img.width , img.height)  // 能获取到节点，但是获取不到高度，因为还没加载完
            document.querySelector('p').textContent = 'DOM 已加载完成。';
        });

        // load 事件
        window.addEventListener('load', function() {
            console.log('所有外部资源已加载完成，样式已应用。');
            // 例如，我们可以在这里执行一些需要等待图片加载完成后的操作
            // let img = document.getElementsByTagName('img')[0]
            // console.log(img.width , img.height) // 能获取到高度
            document.querySelector('p').textContent += '所有资源加载完成。';
        });

        // beforeunload 事件
        window.addEventListener('beforeunload', function(event) {
            // 检查用户是否保存了更改
            var isFormDirty = true; // 假设表单未保存
            if (isFormDirty) {
                event.preventDefault();
                event.returnValue = '你确定要离开吗？你还有未保存的更改！';
            }
            console.log('用户即将离开页面。');
        });

        // unload 事件
        window.addEventListener('unload', function() {
            console.log('用户正在离开页面，执行一些清理操作。');
            // 例如，我们可以在这里发送一些统计数据
            // 注意：在某些浏览器中，unload事件可能不允许异步操作
        });
    </script>
</body>
</html>