学习document.write()

最新推荐文章于 2025-02-14 18:29:56 发布

水星灭绝

最新推荐文章于 2025-02-14 18:29:56 发布

阅读量502

点赞数

分类专栏： h5 前端

本文链接：https://blog.youkuaiyun.com/wulong710/article/details/109702176

版权

前端同时被 2 个专栏收录

137 篇文章

订阅专栏

121 篇文章

订阅专栏

本文探讨了document.write()在网页加载过程中的不同使用时机，解释了在header中使用document.write()不会覆盖已有控件，而在body中使用则可能导致现有控件被清除。

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

在header中写document.write，则是在各个控件载入前写入，不会覆盖掉以前的控件们。

<!DOCTYPE html>
<html>

<head>
    <title>测试2</title>
    <meta charset="utf-8">
    <script type="text/javascript">
    // header中写入
    // setInterval(function (){
        document.open();  //外部JS中调用document，则要先写document.open
        document.write("<p>" + Date() + "</p>");
        document.close(); //用完要关闭，否则后面会不停追加
    // },500);
            
    </script>
</head>

<body>
    <h3>标题3</h3>
    <div style="background-color:orange">


    </div>
    <div>
        <iframe src="http://baidu.com">

        </iframe>
    </div>

    <div>
        <iframe id="new_window">

        </iframe>
    </div>
    </p>
    <h4 id="idhead"><b style="color: blue;">标题4</b></h4>
    <p id="showtxt">

    </p>
    <script type="text/javascript">
        var icount = 0;

        function getWindInfo(win) {
            return "wid=" + String(win.innerWidth) + " height=" + String(win.innerHeight)
                // + " host=" + win.location.host
                // + " pathname=" + win.location.pathname
                // + " port=" + win.location.port
                + " pageXOffset=" + win.pageXOffset
                + " pageYOffset=" + win.pageYOffset
                + " frameLen=" + win.frames.length
                ;
        }

        function showDetail() {

            // 获取new_window控件对应的window句柄
            var nw = document.getElementById("new_window").contentWindow;
            var d  = Date();
            nw.document.write("<h1>当前\=时间</h1><p>time:&lt;" 
                + "<b style=\"color: blue;\">"+ Date() +"</b>"+ "&gt;</p>");
            // 没有close，就会不停在下一行追加。
            nw.document.close(); 

        }

        // var timer = setInterval(function () {
        //     showDetail()
        // }, 500);

    </script>
</body>

</html>

结果：

body中各个控件创建好了再写document.write，则会把body中的控件抹去。

<!DOCTYPE html>
<html>

<head>
    <title>测试2</title>
    <meta charset="utf-8">
    <script type="text/javascript">
    // header中写入
    // setInterval(function (){
        // document.open();  //外部JS中调用document，则要先写document.open
        // document.write("<p>" + Date() + "</p>");
        // document.close(); //用完要关闭，否则后面会不停追加
    // },500);
            
    </script>
</head>

<body>
    <h3>标题3</h3>
    <div style="background-color:orange">


    </div>
    <div>
        <iframe src="http://baidu.com">

        </iframe>
    </div>

    <div>
        <iframe id="new_window">

        </iframe>
    </div>
    </p>
    <h4 id="idhead"><b style="color: blue;">标题4</b></h4>
    <p id="showtxt">

    </p>
    <script type="text/javascript">
        var icount = 0;

        function getWindInfo(win) {
            return "wid=" + String(win.innerWidth) + " height=" + String(win.innerHeight)
                // + " host=" + win.location.host
                // + " pathname=" + win.location.pathname
                // + " port=" + win.location.port
                + " pageXOffset=" + win.pageXOffset
                + " pageYOffset=" + win.pageYOffset
                + " frameLen=" + win.frames.length
                ;
        }

        function showDetail() {

            // 获取new_window控件对应的window句柄
            var nw = document.getElementById("new_window").contentWindow;
            var d  = Date();
            nw.document.write("<h1>当前\=时间</h1><p>time:&lt;" 
                + "<b style=\"color: blue;\">"+ Date() +"</b>"+ "&gt;</p>");
            // 没有close，就会不停在下一行追加。
            nw.document.close(); 

        }

        var timer = setInterval(function () {
            showDetail()
        }, 500);

    </script>
</body>

</html>