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之大字符串的连接的StringBuffer 类
May 08 Javascript
javascript 一个自定义长度的文本自动换行的函数
Aug 19 Javascript
JS 拼图游戏 面向对象,注释完整。
Jun 18 Javascript
html向js方法传递参数具体实现
Aug 08 Javascript
详解Bootstrap的aria-label和aria-labelledby应用
Jan 04 Javascript
基于BootStrap Metronic开发框架经验小结【二】列表分页处理和插件JSTree的使用
May 12 Javascript
jQuery 跨域访问解决原理案例详解
Jul 09 Javascript
jQuery Easyui Datagrid实现单行的上移下移及保存移动的结果
Aug 15 Javascript
微信小程序  action-sheet详解及实例代码
Nov 09 Javascript
使用vue的v-for生成table并给table加上序号的实例代码
Oct 27 Javascript
原生JS实现自定义下拉单选选择框功能
Oct 12 Javascript
微信小程序 导入图标实现过程详解
Oct 11 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
《逃离塔科夫》——“萌新劝退,老手自嗨”的硬核FPS游戏
2020/04/03 其他游戏
繁体中文转换为简体中文的PHP函数
2006/10/09 PHP
php实现按指定大小等比缩放生成上传图片缩略图的方法
2014/12/15 PHP
PHP中filter函数校验数据的方法详解
2015/07/31 PHP
[原创]PHP正则删除html代码中a标签并保留标签内容的方法
2017/05/23 PHP
laravel框架上传图片实现实时预览功能
2019/10/14 PHP
jQuery生成asp.net服务器控件的代码
2010/02/04 Javascript
限制文本框输入N个字符的js代码
2010/05/13 Javascript
基于jquery自定义的漂亮单选按钮RadioButton
2013/11/19 Javascript
Asp.Net alert弹出提示信息的几种方法总结
2014/01/29 Javascript
jQuery实现强制cookie过期方法汇总
2015/05/22 Javascript
微信小程序 window_x64环境搭建
2016/09/30 Javascript
前端JS面试中常见的算法问题总结
2016/12/23 Javascript
jQuery解析返回的xml和json方法详解
2017/01/05 Javascript
nodejs入门教程三:调用内部和外部方法示例
2017/04/24 NodeJs
详解Vue + Vuex 如何使用 vm.$nextTick
2017/11/20 Javascript
JS实现验证码倒计时的注册页面
2018/01/02 Javascript
深入学习TypeScript 、React、 Redux和Ant-Design的最佳实践
2019/06/17 Javascript
前端开发之便利店收银系统代码
2019/12/27 Javascript
javascript事件循环event loop的简单模型解释与应用分析
2020/03/14 Javascript
微信小程序之导航滑块视图容器功能的实现代码(简单两步)
2020/06/19 Javascript
使用Python编写一个最基础的代码解释器的要点解析
2016/07/12 Python
python实现的多线程端口扫描功能示例
2017/01/21 Python
python基于pyDes库实现des加密的方法
2017/04/29 Python
详解TensorFlow在windows上安装与简单示例
2018/03/05 Python
使用python实现对元素的长截图功能
2019/11/14 Python
python使用Word2Vec进行情感分析解析
2020/07/31 Python
GafasWorld哥伦比亚:网上购买眼镜
2017/11/28 全球购物
美国智能家居专家:tink
2019/06/04 全球购物
Feelunique德国官方网站:欧洲最大的在线美容零售商
2019/07/20 全球购物
电气工程师岗位职责
2014/01/01 职场文书
业务副厂长岗位职责
2014/01/03 职场文书
2014年学生会工作总结范文
2014/11/07 职场文书
幼儿园小班教育随笔
2015/08/14 职场文书
合作协议书格式范本
2016/03/21 职场文书
Go结合Gin导出Mysql数据到Excel表格
2022/08/05 Golang