关于document.write()重写页面

今天碰到了一个以前没注意的问题即:document.write(),在此拿来分享!

document.write是最基本的JavaScript命令之一,这个命令简单地打印指定的文本内容到页面上(注意是页面,所以想用write指定具体打印到哪个地方的同学可以心凉了)。

使用这个方法会碰到两个状态:1、添加内容到页面中;2、重写页面;为什么出两种状态?

页面在生成时有一个输入流的状态。在页面加载时这个状态是自动打开的,这时内容会从上至下添加内容。

此时调用document.write会把内容写进页面里面,但我们不能准确控制加载的位置,只能根据write()方法调用的位置使其内容放入页面大概的位置。

例如:

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 5     <title></title>
 6     <meta charset="utf-8" />
 7 </head>
 8 <body>
 9     <script type="text/javascript">
10         document.write("我是输出内容!");
11     </script>
12     <h1>我是HTML标签内容!</h1>
13 </body>
14 </html>
 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 5     <title></title>
 6     <meta charset="utf-8" />
 7 </head>
 8 <body>
 9     <h1>我是HTML标签内容!</h1>
10     <script type="text/javascript">
11         document.write("我是输出内容!");
12     </script>
13 </body>
14 </html>

而当页面加载完成后即window.onload后,会自动的运行document.close()方法关闭这个输入流,如果此时我们再运行document.write会打开一个新的输入流在页面,此时会重写页面。

(注意:重写的是body里面的内容)

所以,如果想添加内容,还是用innnerHTML吧;

当然如果想重写页面,在window.onload后调用document.write就行了,但要记得在写完后调用close()方法关闭输入流,不关闭的话据说会阻挡图片的显示,但我没测试。

欢迎批评指正,有更好的想法多多交流~

时间: 2024-07-28 14:21:31

关于document.write()重写页面的相关文章

使用 document.onreadystatechange()来判断页面加载完

document.onreadystatechange = subSomething;//当页面加载状态改变的时候执行这个方法. function subSomething() {  if(document.readyState == "complete"){ //当页面加载状态为完全结束时进入               //你要做的操作.    }} 说明 :onreadystatechange 事件能辨识readyState 属性的改变. 一般可用 document.onread

document.onreadystatechange()来判断页面加载完

document.onreadystatechange = subSomething;//当页面加载状态改变的时候执行这个方法. function subSomething() {  if(document.readyState == "complete"){ //当页面加载状态为完全结束时进入               //你要做的操作.    }}

通过document.referrer判断页面是链接调整还是新打开以及来源

业务需求: 1.复制链接或者QQ中在浏览器中新打开的链接,点击"返回"跳转到列表页: 2.从列表页链接调整进的店"返回"执行浏览器的"返回"动作,好处是能直接定位到列表页上次浏览的位置. function ClickBack(){ if(document.referrer==""||document.referrer.indexOf("cases")==-1){ //返回到案例列表 window.locat

document.readyState等属性,判断页面是否加载完

如何在页面加载完成后再去做某事?什么方法可以判断当前页面加载已完成?document.readyState 判断页面是否加载完成?javascript提供了document.readyState=="complete"方法来解决当前页面加载判断的问题. <script type="text/javascript">   function initView(){         if (document.readyState=="complete

JavaScript-2.2 document.write 输出到页面的内容

<html> <head> <meta http-equiv="content-type" content="text/html;charset=GB2312"/> <title> 2-4 使用document.write经内容输出到页面 </title> <!--脚本部分--> <script type="text/javascript"> document.w

iframe父子页面操作-比较好用的两个方法-window.parent/oframe.contentWindow.document

发现比较好用的iframe父子页面操作方法,记录一下 1.父页面 test.html <iframe id="iframe1" src="iframe.html"></iframe> 获取iframe    var oframe = document.getElementById("main") 获取子页面  var child =  oframe.contentWindow.document 获取子页面元素      v

从原型链看DOM--Document类型

JavaScript通过Document类型表示文档,原型链的继承关系为:document.__proto__->HTMLDocument.prototype->Document.prototype->Node.prototype->EventTarget.prototype Document节点具有下列特征:以下属性均为Node.prototype上的 nodeType值为9 nodeName值为"#document" nodeValue值为null pare

document.write()的一些坑

这段时间在做一个广告系统,需要用js自动生成广告代码,其中遇到一些问题,在这记录下. 第三方广告代码一般都是用 document.write()向页面写入,这次使用的时候遇到不少坑,经常会出现使用document.write()向页面写入的时候当前页面被清 空.这正是document.write()的特殊之处,页面载入后浏览器输出流自动关闭.此后对当前页面进行document.write()操作将打 开—个新的输出流,它将清除当前页面内容(包括源文档的任何变量或值). 那么有哪些浏览器输出流关闭

js 页面间的通信

目录 一.window对象的open方法 1.window对象 2.window对象的open方法 (1)window.open(URL,name,features,replace) (2)用window.open方法实现页面通信 3.window.showModalDialog (1)window.showModalDialog (2)window.showModelessDialog (3)兼容性 4.window的height和width (1)原生js的window.innerWidth