document.write()

  以前一直以为document.write()就一定会清空文档里面的所有内容,一直没有去尝试,最近才知道原来是要在特定的情况下document.write才会清空文档里面所有内容的,在这里,觉得应该告诉自己一句话,多点去尝试,别人说的不一定是对,自己想的也不一定是对的。

  下面是我做的几个测试,应该能说明关于document.write的用法了:

  1.关于清空的问题:

  (1)调用window.onload事件,清空原本文档内容:

  <!DOCTYPE html>
  <html>
    <head>
      <meta charset="UTF-8">
      <title>document.write</title>
      <script type="text/javascript">
        window.onload = function(){
          document.write("你要足够优秀,才能够支持其自己的梦想。");
        }
      </script>
    </head>
    <body>
      <div>你好啊,世界。请努力去尝试,去勇敢。</div>
    </body>
  </html>

  上面的代码的结果是:

  

  这种情况下会将原本的文档内容清空,因为使用了window.onload事件,当页面才加载完才去执行事件处理函数,这个时候文档流已经关闭了,这个时候执行document.write()函数会自动调用document.open()函数创建一个新的文档流,并写入新的内容,再通过浏览器展示,这个就覆盖原本的内容了。

  (2)不调用window.onload事件,不清空文档原本内容:

  <!DOCTYPE html>

  <html>
    <head>
      <meta charset="UTF-8">
      <title>document.write</title>
      <script type="text/javascript">
        document.write("你要足够优秀,才能够支持其自己的梦想。");
        document.write("<br/>");
        document.write("越努力,越幸运。");
      </script>
    </head>
    <body>
      <div>你好啊,世界。请努力去尝试,去勇敢。</div>
    </body>
  </html>

  运行结果:

  

  另一个代码:

  <!DOCTYPE html>

   <html>
    <head>
      <meta charset="UTF-8">
      <title>document.write</title>
    </head>
    <body>
      <div>你好啊,世界。请努力去尝试,去勇敢。</div>
    </body>
     <script type="text/javascript">
      document.write("你要足够优秀,才能够支持其自己的梦想。");
      document.write("<br/>");
      document.write("越努力,越幸运。");
    </script>
  </html>

  运行结果:

  

  上面的方法不会清空文档原本的内容,这是因为当前的文档流是浏览器所创建的,并且document.wirte()就在其中,在执行document.wirte()这个函数的时候文档流还没有被关闭,不用调用document.open()函数创建新的文档流,所以就不会被覆盖;就是说当文档里面的输入对象的文档流和document.wirte()函数的文档流是同一个的时候,document.wirte()函数就不会清空原本的文档内容,但是当浏览器创建的文档流关闭了之后document.wirte()函数要调用document.open()函数创建新的文档流的时候,原本文档中已经存在的写好的东西就会因此而清空。

  (3)不调用window.onload事件,并且先执行window.close()强制关闭文档流的情况:

  <!DOCTYPE html>

  <html>
    <head>
      <meta charset="UTF-8">
      <title>document.write</title>
      <script type="text/javascript">
        document.close();
        document.write("你要足够优秀,才能够支持其自己的梦想。");
        document.write("<br/>");
        document.write("越努力,越幸运。");
      </script>
    </head>
    <body>
      <div>你好啊,世界。请努力去尝试,去勇敢。</div>
    </body>
  </html>

  执行结果:

  

  为什么使用window.close()函数关闭了文档流还是不会清空原本文档的内容呢?原因是文档流是浏览器创建的,无权手动关闭,document.close()函数只能关闭由document.write()函数创建的文档流。

  如果我们用下面的方法,利用window.close()函数关闭window.write()函数创建的文档流,就会清空原本的内容:

  <!DOCTYPE html>
  <html>
    <head>
      <meta charset="UTF-8">
      <title>document.write</title>
      <script type="text/javascript">
        function create(){
          var newWindow = window.open("","新开的页面","_blank");
          newWindow.document.write("你要足够优秀,才能够支持其自己的梦想。");
          newWindow.document.close();
          newWindow.document.write("越努力,越幸运。");
        }
      </script>
    </head>
    <body>
      <div>你好啊,世界。请努力去尝试,去勇敢。</div>
      <input type="button" value="点击" onclick="create()">
    </body>
  </html>

  输入结果:

  

  这个时候newWindow.document.write()就会覆盖第二个newWindow.document.write()函数,这是因为第一个newWindow.document.write()已经被newWindow.document.close()关闭了文档流。

时间: 2024-10-15 05:57:36

document.write()的相关文章

跨域cors方法(jsonp,document.domain,document.name)及iframe性质

这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被当作是不同的域. 下表给出了相对 http://store.company.com/dir/page.html 同源检测的结果: 要解决跨域的问题,我们可以使用以下几种方法: 1.通过jsonp跨域[解决ajax跨域] 在js中,我们直接用XMLHttpRequest请求不同域上的数据时,是不可以的

document对象

一.找元素: 1)根据id找:.getElementById() 2)根据class找:.getElementsByClassName()返回值为数组 3)根据name找:.getElementsByName()返回值为数组 4)根据标签名找:.getElementsByTagName()返回值为数组 二.操作内容: 1.普通元素: 1)获取内容:a.innerText 2)设置内容:a.innerText=""; 3)获取内容代码:a.innerHtml; 4)设置内容:a.inne

[翻译] ORMLite document -- How to Use Part (二)

前言 此文档翻译于第一次学习 ORMLite 框架,如果发现当中有什么不对的地方,请指正.若翻译与原文档出现任何的不相符,请以原文档为准.原则上建议学习原英文文档. ---------------------------------------------------------------------------------------------- 二.如何使用 2.7 表的创建 ORMLite 提供了一些工具类为您存储在数据库中的类创建 table 和 schema. 2.7.1 Tabl

JavaScript document 对象

1.document属性 cookie -- 用户cookie title -- 当前页面title标签中定义的文字 URL -- 当前页面的URL document代表HTML文档的内容,因此可以通过它表示文档中加载的一些元素,这些元素全部通过集合访问. anchors -- 文档中所有锚(a name="aname")的集合 applets -- 文档中所有applet标签表示的内容的集合 embeds -- 文档中所有embed标签表示的内容的集合 forms -- 文档中所有f

vs 2012 调试不了js -- solution 中script document显示不出来

背景: 因为项目的需要,从ie8升级到ie11(并且自动更新安装了几个ie11的补丁),升级后想用vs2012 调试asp.net项目中的js 但是发现solution中script document项目没有在项目中运行时启动,js不能打断点(***的空心圈). 解决过程: 这个同组的同事以前遇到过,并且解决了,所以向他请教,无果,不知道怎么解决的... 搜索了一下不能打断点的提示信息,网上给的说法是高级设置ie中禁掉第三方的调试工具选项前面的勾去掉,无果:这个和我的问题没有关系. 之前有同事更

document.documentElement.scrollTop

要获取当前页面的滚动条纵坐标位置, 用:      document.documentElement.scrollTop; 而不是:      document.body.scrollTop; documentElement 对应的是 html 标签,而 body 对应的是 body 标签. 在标准w3c下,document.body.scrollTop恒为0,需要用document.documentElement.scrollTop来代替    如果你想定位鼠标相对于页面的绝对位置时,你会发现

jquery插件开发;(function ( $, window, document, undefined ){}(jQuery, window,document)分析

经常看到许多jquery插件是这种形式: ;(function( $, window, document, undefined ){}){ //...code }(jquery,window,document) 一开始自己也是不太清楚,后台查了许多资料博客,基本了解大意,所以总结出来,以供之后查阅更正. 1.自调函数(function(){})() 这是一个自调函数,函数定义后自行调用.将匿名函数放在括号之内,并紧跟一个括号.第二个括号的意思是"立即调用".同时第二个括号也是向匿名函数

js对象之window和document区别

window是整个页面的全局环境,而document可以理解为整个页面这个最大的元素(整个dom树) window: 可以看到window下面有很多变量 document: 可见document是整个dom树了

jquery $(document).ready() 与window.onload的区别

转载自http://www.jb51.net/article/21628.htm 1.执行时间 window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行.         $(document).ready()是DOM结构绘制完毕后就执行,不必等到加载完毕. 2.编写个数不同 window.onload不能同时编写多个,如果有多个window.onload方法,只会执行一个          $(document).ready()可以同时编写多个,并且都可以得到执行 3.简化

JavaScript-输出内容(document.write)

在javascript中,document.write()方法用来向网页中输出内容. 1 . 第一种:输出内容用" "括起,直接输出" "号内的内容.第四种 <script type="text/javascript"> document.write("I am a student studying for JavaScript!"); </script> 在网页中输出的内容即:I am a stude