js中document.write的那点事


Posted in Javascript onDecember 12, 2014

记住,在载入页面后,浏览器输出流自动关闭。在此之后,任何一个对当前页面进行操作的document.write()方法将打开—个新的输出流,它将清除当前页面内容(包括源文档的任何变量或值)。因此,假如希望用脚本生成的HTML替换当前页面,就必须把HTML内容连接起来赋给一个变量,使用一个document.write()方法完成写操作。不必清除文档并打开一个新数据流,一个document.write()调用就可完成所有的操作。

关于document.write()方法还有一点要说明的是它的相关方法document.close()。脚本向窗口(不管是本窗口或其他窗口)写完内容后,必须关闭输出流。在延时脚本的最后一个document.write()方法后面,必须确保含有document.close()方法,不这样做就不能显示图像和表单。并且,任何后面调用的document.write()方法只会把内容追加到页面后,而不会清除现有内容来写入新值。为了演示document.write()方法,我们提供了同一个应用程序的两个版本。一个向包含脚本的文档中写内容,另—个向—个单独的窗口写内容。请在文本编辑器中键人每个文档,以.html文件扩展名保存,并在浏览器中打开文档。

示例1创建一个按钮,它为文档组合新的HTML内容,包括新文档标题的HTML标记和标记的颜色属性。示例中有一个读者所不熟悉的操作符+=,它把其右侧的字符串加到其左侧的变量中,这个变量用来存放字符串,这个操作符能很方便地把几个单独的语句组合成—个长字符串。使用组合在newContent变量中的内容,document.write()语句可以把所有新内容写到文档中,完全清除示例1中的内容。然后需要调用document.close()语句关闭输出流。当载入该文档并单击按钮时,可以注意到浏览器标题栏中的文档标题因此而改变。当回到原始文档并再次单击该按钮时,可以看到动态写入的第二个页面的载入速度甚至比重载原始文档还要快。

示例1 在当前窗口使用document.write()。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><title>Writing to Same Doc</title>
<script language="JavaScript">
 function reWrite(){
  // assemble content for new window
  var newContent = "<html><head><title>A New Doc</title></head>"
  newContent += "<body bgcolor='aqua'><h1>This document is brand new.</h1>"
  newContent += "Click the Back button to see original document."
  newContent += "</body></html>"
  // write HTML to new window document
  document.write(newContent)
  document.close() // close layout stream
 }
</script>
</head>
<body>
 <form>
  <input type="button" value="Replace Content" onClick="reWrite()">
 </form>
</body>
</html>

示例2中,情况有点复杂,因为脚本创建了一个子窗口,整个脚本生成的文档都将写入该窗口中。为了使新窗口的引用在两个函数中保持激活状态,我们将newWindow变量声明为全局变量。页面载入时,onLoad事件处理调用makeNewWindow()函数,该函数生成一个空的子窗口。另外,我们在window.open()方法的第三个参数中加入一个属性,使子窗口的状态栏可见。

页面上的按钮调用subWrite()方法,它执行的第一个任务是检查子窗口的closed属性。假如关闭了引用窗口,该属性(只在较新的浏览器版本中存在)返回true。如果是这种情况(假如用户手动关闭窗口),该函数再次调用makeNewWindow()函数来重新打开那个窗口。

窗口打开后,新的内容作为字符串变量组合在一起。与示例1一样,一次性写入内容(虽然对单独的窗口没有必要),接下来调用close()方法。但是注意一个重要的区别:write() 和 close()方法都明显地指定了子窗口。

示例2 在另一个窗口中使用document.write()

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><title>Writing to Subwindow</title>
<script language="JavaScript">
 var newWindow
 function makeNewWindow(){
  newWindow = window.open("","","status,height=200,width=300")
 }

 function subWrite(){
  // make new window if someone has closed it
  if(newWindow.closed){
   makeNewWindow()
  }
  // bring subwindow to front
  newWindow.focus()
  // assemble content for new window
  var newContent = "<html><head><title>A New Doc</title></head>"
  newContent += "<body bgcolor='coral'><h1>This document is brand new.</h1>"
  newContent += "</body></html>"
  // write HTML to new window document
  newWindow.document.write(newContent)
  newWindow.document.close()  // close layout stream
 }
</script>
</head>

<body onLoad="makeNewWindow()">
 <form>
  <input type="button" value="Write to Subwindow" onClick="subWrite()">
 </form>
</body>
</html>
Javascript 相关文章推荐
javascript 写类方式之七
Jul 05 Javascript
Prototype Selector对象学习
Jul 23 Javascript
ExtJS4 Grid改变单元格背景颜色及Column render学习
Feb 06 Javascript
js实现点击图片改变页面背景图的方法
Feb 28 Javascript
H5移动端图片压缩上传开发流程
Nov 09 Javascript
vue快捷键与基础指令详解
Jun 01 Javascript
JS实现点击复选框变更DIV显示状态的示例代码
Dec 18 Javascript
使用D3.js创建物流地图的示例代码
Jan 27 Javascript
Vue 页面切换效果之 BubbleTransition(推荐)
Apr 08 Javascript
详解基于Vue,Nginx的前后端不分离部署教程
Dec 04 Javascript
利用d3.js力导布局绘制资源拓扑图实例教程
Jan 08 Javascript
微信小程序实现获取准确的腾讯定位地址功能示例
Mar 27 Javascript
让javascript加载速度倍增的方法(解决JS加载速度慢的问题)
Dec 12 #Javascript
jQuery实现瀑布流布局
Dec 12 #Javascript
jquery+ajax验证不通过也提交表单问题处理
Dec 12 #Javascript
js 左右悬浮对联广告代码示例
Dec 12 #Javascript
原生JavaScript+LESS实现瀑布流
Dec 12 #Javascript
jquery禁止回车触发表单提交
Dec 12 #Javascript
完美兼容各大浏览器的jQuery插件实现图片切换特效
Dec 12 #Javascript
You might like
PHP实现MySQL更新记录的代码
2008/06/07 PHP
smarty学习笔记之常见代码段用法总结
2016/03/19 PHP
PHP Post获取不到非表单数据的问题解决办法
2018/02/27 PHP
js 获取计算后的样式写法及注意事项
2013/02/25 Javascript
Javascript表格翻页效果的具体实现
2013/10/05 Javascript
jquery如何扑捉回车键触发的事件
2014/04/24 Javascript
自定义Angular指令与jQuery实现的Bootstrap风格数据双向绑定的单选与多选下拉框
2015/12/12 Javascript
微信小程序开发之相册选择和拍照详解及实例代码
2017/02/22 Javascript
利用Vue.js+Node.js+MongoDB实现一个博客系统(附源码)
2017/04/24 Javascript
BootStrap Table实现server分页序号连续显示功能(当前页从上一页的结束序号开始)
2017/09/12 Javascript
详解VUE2.X过滤器的使用方法
2018/01/11 Javascript
React.js绑定this的5种方法(小结)
2018/06/05 Javascript
vue组件间的参数传递实例详解
2019/04/26 Javascript
深入浅出vue图片路径的实现
2019/09/04 Javascript
nodejs dgram模块广播+组播的实现示例
2019/11/04 NodeJs
Vue+Element UI 树形控件整合下拉功能菜单(tree + dropdown +input)
2020/08/28 Javascript
python使用wxPython打开并播放wav文件的方法
2015/04/24 Python
详解Python中的array数组模块相关使用
2016/07/05 Python
Python 3中print函数的使用方法总结
2017/08/08 Python
详解Python中的分组函数groupby和itertools)
2018/07/11 Python
从请求到响应过程中django都做了哪些处理
2018/08/01 Python
Python实现将Excel转换成为image的方法
2018/10/23 Python
Python异常的检测和处理方法
2018/10/26 Python
使用Python实现文字转语音并生成wav文件的例子
2019/08/08 Python
基于python实现地址和经纬度转换
2020/05/19 Python
HTML5 canvas基本绘图之绘制阴影效果
2016/06/27 HTML / CSS
HTML5的自定义属性data-*详细介绍和JS操作实例
2014/04/10 HTML / CSS
应届生财务会计求职信
2013/11/05 职场文书
中文系学生自荐信范文
2013/11/13 职场文书
优良学风班总结材料
2014/02/08 职场文书
《乡愁》教学反思
2014/02/18 职场文书
2015年社区民政工作总结
2015/04/21 职场文书
我的中国梦主题教育活动总结
2015/05/07 职场文书
法制教育观后感
2015/06/17 职场文书
现实表现证明材料
2015/06/19 职场文书
2022年显卡天梯图(6月更新)
2022/06/17 数码科技