跳转到帖子

  • 游客您好，欢迎来到黑客世界论坛！您可以在这里进行注册。

    赤队小组-代号1949（原CHT攻防小组）在这个瞬息万变的网络时代，我们保持初心，创造最好的社区来共同交流网络技术。您可以在论坛获取黑客攻防技巧与知识，您也可以加入我们的Telegram交流群 共同实时探讨交流。论坛禁止各种广告，请注册用户查看我们的使用与隐私策略，谢谢您的配合。小组成员可以获取论坛隐藏内容！

    TheHackerWorld官方

[javascript]document的open() write() close()用法

 分享
KaiWn

由 KaiWn，
在 JavaScript

推荐的帖子

KaiWn Proficient

KaiWn

发布于
发布于

  • 1、document.open()

    作用：打开一个新文档，即打开一个流，并擦除当前文档的内容。
    执行完后会打开一个空的html文档
    语法：document.open(mimetype,replace)

    参数：

    mimetype：可选。规定正在写的文档的类型。默认值是"text/html"。
    replace：可选。当此参数设置后，可引起新文档从父文档继承历史条目。 

    document.open("text/html","replace")；

    这种形式现在已经弃用；它不会抛出错误，但会直接调用document.open()（相当于无参数形式的调用）。这种历史写入替换行为现在一定会发生

    2、document.write()

    document.write是JavaScript中对document.open所开启的文档流(document stream操作的API方法，
    它能够直接在文档流中写入字符串，一旦文档流已经关闭，那document.write就会重新利用document.open打开新的文档流并写入，
    此时原来的文档流会被清空，已渲染好的页面就会被清除，浏览器将重新构建DOM并渲染新的页面。
    （当页面加载完后，再使用document.write会清空之前的页面）

    一.写入文本（页面加载中可以写入，而不会出现重写页面问题） 

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>
  <body>
    <h1>123</h1>
    <script>
      document.write("<p>document的write </p>");
    </script>
    <h2>123</h2>
  </body>
</html>

    这段在h1和h2之间内嵌一个脚本，使用document.write来写入一个p标签
    屏幕截图 2022-09-03 170513.png
    即要文本在脚本执行的位置被插入。这是因为，浏览器就解析HTML构建DOM的时候，如果遇到script就会暂停下来，解析script中的代码并执行，然后再继续解析剩余HTML。(阻塞进行的)

    此时再去浏览器中检测DOM的结构，会发现script与h2之间多了一个p，浏览器在解析完h1之后，碰到script并执行之，此时document.write将一段HTML代码写入到文档流中，script执行完毕后，浏览器会解析文档流中的字符串，对新添加的p标签进行解析。

    如果将渲染好的页面保存下来，不同的浏览器会有不同的结果。如Chrome和Firefox的做保存下来的页面文件中，script后面会增加p标签，而IE中则是维持原状。（这里指的是原有的HTML结构，不同浏览器将页面保存会作不同的处理，有些会增加一些不影响原有结构的标签或注释。这意味着，如果浏览器重新加载Chrome或Firefox中保存下来的页面文件，就会多出一个p标签。

    二.写入脚本(注意加转义符号)

    既然document.write可以写入p并被浏览器解析，那么自然地也可以写入script标签。 

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h1>h1</h1>
    <script>
      document.write("<script>alert('冲')</script>");
    </script>
    <h2>h2</h2>
  </body>
</html>

    我们将代码作出上面的改动，意图在利用document.write在页面中插入一段脚本。这段代码的本意是弹出一个窗口，阻塞浏览器对HTML的解析。

    浏览器下刷新页面，发现并不管用，取而代之的是显示出一个没有意料到的页面。
    屏幕截图 2022-09-03 170631.png
    去检查DOM树，就会发现，这段脚本被拦腰截断了！浏览器将它解析成以下代码： 

     <script>
      document.write("<script>alert('冲')
        </script>
    ");

    插入文本中的被当成了第一个script的闭合标签，因此这个段代码成了非法代码，因为document.write的调用书写不正确，缺少右边的括号)。此时，你可以在console中看到相关的错误信息。(控制台)

    为了解决这个问题，我们可以对插入文本中闭合的的标签进行轻微修改，对最后一个>进行转义，变成>。

    此时再刷新一下页面，就可以看到预想中的结果。即页面中仅显示h1，弹窗阻塞了浏览器对HTML的解析，关闭弹窗后，浏览器继续对HTML的解析并完成对页面的渲染。

    再去看看DOM的结构，会发现在原有的script元素后面又多了一个新的 < script > 元素，其中所执行的代码就是我们的alert('冲')。

    三.document.write使用的时机

    这样看来，利用document.write来在HTML中插入标签非常方便，就如同让浏览器在解析HTML的时候动态得添加标签，而且只需要一行代码即可，不需要使用document.createElement再将其插入到DOM中。

    但为什么大家都不建议使用document.write呢？这跟document.write的实现机制有关。在讨论之前，先看看下面的代码： 

    <script>
    setTimeout(function(){
        document.write('<p>5 secs later</p>');
    }, 5000);
</script>

    对之前的代码作简单修改，这段代码同样是想插入一个p元素，但它是在5秒以后才执行。

    刷新页面后，我们看到了这样的显示效果： 

    h1

h2

    但是5秒以后，却变成了这样：（页面被重写了！！） 

    5 secs later

    原来的h1、h2甚至是script，DOCTYPE还有head（当然，之前并没有往head添加任何标签，但如果添加了，这些标签也会有同样的下场），它们全部都不见了，取而代之的是一个基本的html结构，它是这样的：

    5 secs later

    这是一个全新的页面，document.write将之前的页面全部清除了，重新打开一页面并在这个页面上写入了新的标签。为什么会这样呢？（5s后页面加载完了，所以重写页面了！）

    回到再文章开头所描述文字，就会找到结果。这是因为，5秒以后，浏览器早已完成了HTML的解析，并将文档流给关闭了。5秒后，timeout事件触发，document.write在执行的时候发现文档流已经关闭了，就会重新调用document.open打开一个新的文档流，而document.open的调用则会清除已有的文档。所以，最终看到的显示结果就是向上面那样，之前存在的页面都被清除掉了。

    如果我们把document.write调用放到DOMCOntentLoaded或load的事件处理中，也会得到同样的结果。

    这样看到，除非是在浏览器关闭文档之前调用document.write，否则当前页面都会被清除。

    （说通俗点，如果能保证这货在onload前执行，那么可以实现载入，而不是重写）

    这一个特性决定了document.write在实际开发中的应用范围和时机。那么，什么时候应该使用document.write呢？

    在网上搜集的资料看，一般在下列情景下可以利用document.write来完成某些特殊的操作：

    加载需要配合JS脚本使用的外部CSS文件
    利用下面的语句加载外部样式文件： 

    <scirpt>
    document.write('<link  rel="stylesheet" href="style_neads_js.css">');
</script>

    将所有需要用到JS的样式都放到这个外部样式表中，如果浏览器不禁用JS，那么该样式表就会被顺利加载，否则页面就不会使用该样式。（Don’t docwrite scripts）

    在新的窗口中写入新的页面数据时（新建一个页面就不会重写之前的）
    既然在一个已加载完成的页面中调用document.write会重写整个页面，那么在一个新的窗口的空白页面中调用这个方法，就不存在这样的的问题了。

    另外，在调用document.write，最好不要把document.open和document.close漏掉，尽管多数时候浏览器会帮忙完成这些操作。即，一个标准的document.write应该是这样的： 

    document.open();
document.write('anthing')
document.close();

    弊端
    从某个角度说，document.write的实际功能确实很强，能够直接修改文档流，但它有很多弊端：

    1. 在非loading阶段调用document.write会清除已加载的页面；
    2. document.write不能够在XHTML中使用；
    3. 嵌入script中的document.write不能给任意节点添加子节点，因为它是随着DOM的构建执行的；
    4. 利用document.write写入HTML字符串流并不是一个好方法，它有违DOM操作的概念；
    5. 利用document.write添加script加载外部脚本时，浏览器的HTML解析会被script的加载所阻塞；

    3、document.close()

    功能：close()方法可关闭一个由open()方法打开的输出流，并显示选定的数据。

    语法：document.close()

链接帖子
意见的链接
分享到其他网站
 分享
转到主题列表

黑客攻防讨论组

黑客攻防讨论组

  
    You don't have permission to chat.

    • 最近浏览   0位会员

      • 没有会员查看此页面。

    黑客世界站内导航 (SITE MAP)

    ×
    ×
    • 创建新的...