【转】关于document的三个方法：open、write、close

LTIven

于 2019-07-10 17:21:32 发布

阅读量447

点赞数

分类专栏：前端开发需要回头看的文章成长轨迹 js 文章标签： document

前端开发同时被 3 个专栏收录

177 篇文章 3 订阅

订阅专栏

需要回头看的文章

126 篇文章 0 订阅

订阅专栏

成长轨迹

123 篇文章 0 订阅

订阅专栏

document.open会打开一个新文档，清除已加载的文档；document.write在HTML加载后调用会导致open方法调用一次；document.close会关闭打开的文档。

直接看代码和效果图：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>关于write</title>
</head>
<body>
    <h1>HTML - 1</h1>

    <script>
        function doAsync(fun){
            setTimeout(fun, 3000);
        }
        //调用document.open，清除当前文档，但是需要HTML加载完成后有效
        document.open();
        //文档加载未完成
        //脚本阻塞HTML解析，write会向文档流添加内容
        document.write("<h1>这里调用open、close无效 [文档未加载完成]</h1>");
        document.open();
        document.close();
        document.open();
        document.close();
        doAsync(()=>{
            //文档已加载
            //调用document.write会导致document.open调用一次
            //document.open会清除前文档并开始一个新的文档
            document.write("<h1>文档加载结束。调用open，清除原文档</h1>");
            document.write("<h1>这次没调用open，保持追加</h1>");
            //document.write方法不会导致document.close调用，需要手动调用
            //document.close之后，如果再调用document.write，会导致document.open调用一次
            document.close();

            doAsync(()=>{
                document.open();
                document.write("<h1>这里手动调用open，原文档被清除</h1>");
                //调用document.open会清除页面，即便没有close
                document.open();
                document.write("<h1>这里手动调用open，原文档被清除</h1>");
                document.close();
            });

        });
    </script>

    <h1>HTML - 2</h1>
</body>
</html>