“您只能在 HTML 输出中使用 document.write。如果您在文档加载后使用该方法，会覆盖整个文档。”

最新推荐文章于 2021-06-05 12:16:31 发布
最新推荐文章于 2021-06-05 12:16:31 发布
阅读量7.9k 收藏 7
点赞数 5
CC 4.0 BY-SA版权
分类专栏： Front-End
喜欢文章？请私信联系作者。
本文链接：https://blog.csdn.net/liu16659/article/details/52020392
本文解析了JavaScript中document.write方法的使用限制及其可能导致的行为变化，尤其是在页面加载完成后调用此方法时，将会覆盖整个文档。

 提示：您只能在 HTML 输出中使用 document.write。如果您在文档加载后使用该方法，会覆盖整个文档。

今天开始在学JavaScript时，发现上述的这么一句话，并且W3cshool上给的代码如下：

<!DOCTYPE html>
<html>
<body>


<p>
JavaScript 能够直接写入 HTML 输出流中：
</p>


<script>
document.write("<h1>This is a heading</h1>");
document.write("<p>This is a paragraph.</p>");
</script>


<p>
您只能在 HTML 输出流中使用 <strong>document.write</strong>。
如果您在文档已加载后使用它（比如在函数中），会覆盖整个文档。
</p>

</body>
</html>



起初我没有弄明白，后来知道“

 提示：您只能在 HTML 输出中使用 document.write。如果您在文档加载后使用该方法，会覆盖整个文档。

”这句话的意思是指“通过按钮响应等方式在全部页面加载完毕之后再进行文本写入”看下面一段代码

  1. <html>   
  2. <body>   
  3. <p>helloworld</p>   
  4. <a onclick='javascript:myFunction()'>hello</a>  
  5. <script>   
  6. function myFunction(){   
  7.     document.write('这下应该会清除了吧？');   
  8. }   
  9. </script>   
  10. </body>   
  11. </html>  

如果我们点击生成的“Hello”，可以看到页面编程了“”读者可自己执行代码看最后的反应。



window.open配合document.write实现图片预览而非下载
m0_63026408的博客
07-12 1510
点击事件后要 打开新窗口 预览图片（png，jpg--图片类型不是pdf或者文档）window.open()方法与document.write()方法结合。打开指定URL的页面。如果没有指定URL，打开一个新的空白窗口。
详解在HTTPS 项目中使用百度地图 API
10-17
问题2涉及到浏览器警告，这是由于在部分浏览器（如谷歌）中，使用`document.write`方法加载外部脚本可能会触发安全警告。这是因为这种加载方式可能会影响页面的渲染性能。百度地图API的加载代码中确实使用了`...
Javascript中只能在 HTML 输出流中使用 document.write,在文档已加载后使用它（比如在函数中），会覆盖整个文档。...
weixin_30778805的博客
10-15 383
意思就是说，初次加载时如果没有加载document.write，那么再次加载的时候回覆盖掉原来的内容，只显示新加载的内容。 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 </head> 6 <body> ...
您只能在 HTML 输出中使用 document.write。如果您在文档加载后使用该方法，会覆盖整个文档。
Modaa_的博客
02-04 7346
Javascript中只能在 HTML 输出流中使用 document.write,在文档已加载后使用它（比如在函数中），会覆盖整个文档。html输出流：当前数据形式是HTML格式的数据，这部分数据正被导出、传输或显示，所以称为”流“。思考:什么是在html输出中使用，什么是文档加载后使用？参考代码如下：<!DOCTYPE html> <html> <head> <meta charse
直接写入 html 输出流,您只能在 HTML 输出流中使用 document.write,啥意思
weixin_30366435的博客
06-05 286
JavaScript ；写入到HTML输出语法 注意：只能在HTML输出中使用，如果在文档已经加载后使用(比如在函数中) 会覆盖到整个文档 JavaScript 能够直接写入 HTML 输出流中： document.write("This is a heading");//P1 document.write("This is a paragraph.");//P2 您只能在 HTML ...
javascript中的document.open()方法使用介绍
10-26
使用该方法后，通常会与document.write()方法配合使用，把内容输出到文档中。最后，完成内容写入后，使用document.close()方法来关闭文档流，让浏览器渲染新写入的内容。 在给定的示例代码中，我们看到了document....
探究Document.write在页面加载前后的作用差异
- 如果在页面完全加载后，即标签内的JavaScript代码中使用document.write，浏览器会先清空当前页面的内容，然后插入document.write输出的内容。 - 这种方式会导致页面的闪烁现象，用户体验较差。 - 通常不推荐在...
JavaScript中输出信息的方法(信息确认框-提示输入框-文档流输出)
10-22
本文档详细介绍了JavaScript中实现信息输出的几种主要方法，包括文档流输出、信息提示框（包括警告框和确认框）以及提示输入框等，并且还包括了如何操作DOM元素来输出信息。以下为详细知识点： 1. 文档流输出 文档...
document.write在文档加载后的使用
goodgirl1991的专栏
01-13 2707
在学习document.write函数时，见到了这样一句话：“您只能在 HTML 输出中使用 document.write。如果您在文档加载后使用该方法，会覆盖整个文档。” 于是问题来了 怎样的情况算是文档加载后？ 查阅资料后说，比如你将document.write写在一个函数中，这时，就是在文档加载后使用了该方法，会导致文档上所有内容被清空，只留下document.write中的内容。
document.write覆盖问题
weixin_30915951的博客
07-02 250
1.不会覆盖页面： 　　如果仅仅是一句js语句：document.writeln('<span id=\'span1\'>嗯，你好</span>'); 　　ps:\'是转义字符，代表' 2.覆盖页面 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">...
“document_write()”方法会覆盖页面的问题
小白的博客
07-24 6796
document.write插入标签会覆盖页面的问题 document.write插入js标签会覆盖页面又两种情况： 通过onclick() 点击事件触发执行document.write()，会使document.write()覆盖原来的页面。 在window.onload里面执行document.write()，也会将原来的页面覆盖。 总的来说就是 在页面渲染结束后（即文档加载后）使用doc...
在文档加载后使用(document./ write),会覆盖整个文档
LPLIFE的博客
09-27 1745
标题看着有点奇怪,不是写错了,  直接写document.write不合法,搞半天,发不出来,一直提示"输入的信息错误,请重新提交", 233333,鬼知道哪里信息有误.最后试了发现标题的document.write  如下代码:  &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&g...
直接写入 html 输出流,您只能在 HTML 输出流中使用 document.write,啥意思-站长资讯中心...
weixin_31698627的博客
06-05 162
JavaScript ；写入到HTML输出语法 注意：只能在HTML输出中使用，如果在文档已经加载后使用(比如在函数中) 会覆盖到整个文档 JavaScript 能够直接写入 HTML 输出流中： document.write("This is a heading");//P1 document.write("This is a paragraph.");//P2 您只能在 HTML ...
【JavaScript】使用document.write输出覆盖HTML问题
weixin_30692143的博客
07-17 374
您只能在 HTML 输出中使用 document.write。如果您在文档加载后使用该方法，会覆盖整个文档。 分析 HTML输出流是指当前数据形式是HTML格式的数据，这部分数据正在被导出、传输或显示，所以称为“流”。 通俗的来说就是HTML文档的加载过程，如果遇到document.write就会把内容加入到文档中。例如： <!DOCTYPE html> <html> ...
使用document.write输出覆盖HTML问题
weixin_33737134的博客
07-14 380
今天学习了javascript第一部分，关于使用document.write()写入HTML文档流。但在教程上看到一行提示：您只能在 HTML 输出中使用 document.write。如果您在文档加载后使用该方法，会覆盖整个文档。这使我有些困惑，然后查了网上的各种说法，最后大概的总结一下。 所谓的HTML文档加载，其实HTML文档是自上而下的加载HTML表示的...
您只能在 HTML 输出流中使用 document.write,啥意思
10-24 319
JavaScript ；写入到HTML输出语法 注意：只能在HTML输出中使用，如果在文档已经加载后使用（比如在函数中） 会覆盖到整个文档 <!DOCTYPE html> <html> <body> <p> JavaScript 能够直接写入 HTML 输出流中： </p> <script> document...
您只能在 HTML 输出流中使用 <strong>document.write</strong>。 如果您在文档已加载后使用它（比如在函数中），会覆盖整个文档。 这个怎么理解
最新发布
08-11
<think>我们被要求回答关于document.write的使用限制问题。根据提供的引用，可以总结出以下几点： 1. document.write只能在HTML输出流中使用。这意味着在文档加载过程中，当脚本在HTML文档中直接出现（而不是在函数中）时，它可以向文档中写入内容。 2. 如果在文档加载完成后调用document.write（例如在函数中调用），它会覆盖整个文档，即清除已有的HTML内容，然后写入新的内容。 3. 使用document.write时，可以输出HTML标签和CSS样式，但需要注意书写格式和引号转义。 根据这些信息，我们可以组织回答如下： 首先，解释document.write在HTML输出流中的使用：当文档正在加载时，使用document.write写入的内容会直接追加到文档中。然后，解释在文档加载后使用document.write的后果：它会覆盖整个文档。 我们还可以引用提供的示例代码（引用[4]中的代码）来说明这两种情况。 最后，根据要求生成相关问题。 注意：回答中需要引用引用内容，并在引用处添加引用标识。 由于用户要求使用中文，并且要求结构清晰，我们逐步解释。</think>### document.write 在 HTML 中的使用限制及影响 #### 1. HTML 输出流中的使用（安全场景） 当文档处于 **加载过程** 中时，`document.write()` 会直接将内容**追加**到文档流末尾。这是其设计初衷的使用方式： ```html <script> // 文档加载中执行 → 正常追加内容 document.write("<p>这是追加的内容</p>"); </script> ``` 此时内容会按顺序插入到脚本所在位置，不会破坏现有文档结构。这种行为被称为 "HTML 输出流模式" [^1][^3]。 #### 2. 文档加载后的使用（危险场景） 当文档**已完成加载**（如通过事件触发或在函数中调用）时，`document.write()` 会**清空整个 DOM** 并重新写入： ```html <button onclick="rewritePage()">点击重写</button> <script> function rewritePage() { // 文档加载后执行 → 覆盖整个页面 document.write("<h1>页面已被覆盖!</h1>"); } </script> ``` 点击按钮后，原页面所有内容（包括按钮本身）都会被替换[^1][^4]。 #### ⚠️ 核心限制与风险 | 场景 | 行为 | 后果 | |---------------------|--------------------------|--------------------------| | **文档加载过程中** | 追加内容到当前位置 | 安全 | | **文档加载完成后** | 覆盖整个文档 | 页面内容完全丢失[^1][^4] | | **异步脚本中** | 多数浏览器会忽略 | 内容不显示或报错 | #### 3. 特殊注意事项 - **动态资源加载**：可用来注入脚本标签，但会阻塞渲染 ```javascript document.write('<script src="analytics.js"></script>'); ``` - **样式输出**：需注意 CSS 转义 ```javascript document.write('<style>body { background: #f00; }</style>'); ``` - **现代替代方案**： ```javascript // 更安全的 DOM 操作方式 document.body.insertAdjacentHTML('beforeend', '<p>新内容</p>') ``` > **根本原因**：文档加载时浏览器处于流式解析状态，此时 `document.write()` 追加到当前解析位置；文档关闭后调用会触发新的文档写入流程，导致覆盖[^3][^4]。
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

说文科技

看书人不妨赏个酒钱？

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

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

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值