document.write的几点使用心得


Posted in Javascript onMay 14, 2014

一直用document.write()方法向浏览器中显示数据用,把它当做Alert()使用, 看来这样用有些大材小用了,下面说说它的主要用处。

document.write()方法可以用在两个方面:

         1.页面载入过程中,用脚本加入新的页面内容。

         2.用延时脚本创建本窗口或新窗口的内容。

该方法需要一个字符串参数,它是写到窗口或框架中的HTML内容。这些字符串参数可以是变量或值为字符串的表达式,写入的内容常常包括HTML标记语言。如下面代码,教务系统框架载入子页

<!--将框架放入单元格中-->
<span style="font-size:18px;">                    
    <td class="index-table-middle-center" valign="top" id="content-container">  
        <div id="loading">  
            //加载效果图标  
            <img src="images/loading.gif" alt="loading" border="0" />  
        </div>  
        <script type="text/javascript">  
            //调用JS的OutputIFrame函数,形成框架  
            Index.OutputIframe();  
        </script>  
    </td>
</span>
<span style="font-size:18px;">//输出框架  
    Index.OutputIframe = function () {  
        var scrolling = $.isIE6 == true ? 'yes' : 'auto';  
        document.write('<iframe id="content" width="100%" height="100%" class="hide" marginwidth="0" marginheight="0" frameborder="0" scrolling="' + scrolling + '" onload="$(\'#loading\').hide();$(this).show();" src=""></iframe>');  
    };
</span>

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

关于document.write()方法还有一点要说明的是它的相关方法document.close()。脚本向窗口(不管是本窗口或其他窗口)写完内容后,必须关闭输出流。在延时脚本的最后一个document.write()方法后面,必须确保含有document.close()方法,不这样做就不能显示图像和表单。并且,任何后面调用的document.write()方法只会把内容追加到页面后,而不会清除现有内容来写入新值。

为了演示document.write()方法,我们提供了同一个应用程序的两个版本。一个向包含脚本的文档中写内容,另—个向—个单独的窗口写内容。

示例1创建一个按钮,它为文档组合新的HTML内容,包括新文档标题的HTML标记和标记的颜色属性。

示例中有一个读者所不熟悉的操作符+=,它把其右侧的字符串加到其左侧的变量中,这个变量用来存放字符串,这个操作符能很方便地把几个单独的语句组合成—个长字符串。使用组合在newContent变量中的内容document.write()语句可以把所有新内容写到文档中,完全清除示例1中的内容。

然后需要调用document.close()语句关闭输出流。当载入该文档并单击按钮时,可以注意到浏览器标题栏中的文档标题因此而改变。当回到原始文档并再次单击该按钮时,可以看到动态写入的第二个页面的载入速度甚至比重载原始文档还要快。

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

<html xmlns="http://www.w3.org/1999/xhtml"><title>Writing to Same Doc</title>  <script language="JavaScript">  
  //重新写入函数  
  function RepeatWrite(){  
    // 保存写入的内容  
    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>"  
    // 写入新的内容  
    document.write(newContent);  
    document.close();  
  }  
</script>  
</head>  
<body>  
  <form>  
    <!--单击按钮调用写入函数-->  
    <input type="button" value="Replace Content" onClick="RepeatWrite()">  
  </form>  
</body>  
</html>

总结:

最近在写一个静态资源加载器, 其中有用到document.write, 在经历过一翻折腾后, 发现document.write还是有点内容的,所以决定折腾点东西记录下,同时也算是给自己积累点东西.

Javascript 相关文章推荐
JavaScript写的一个DIV 弹出网页对话框
Aug 14 Javascript
Riot.js 快速的JavaScript单元测试框架
Nov 09 Javascript
jQuery调用WebService的实现代码
Jun 19 Javascript
用JS实现3D球状标签云示例代码
Dec 01 Javascript
jquery无限级联下拉菜单简单实例演示
Nov 23 Javascript
郁闷!ionic中获取ng-model绑定的值为undefined如何解决
Aug 27 Javascript
Vue.js每天必学之组件与组件间的通信
Sep 08 Javascript
js浏览器滚动条卷去的高度scrolltop(实例讲解)
Jul 07 Javascript
解决vue打包之后静态资源图片失效的问题
Feb 21 Javascript
使用Vue如何写一个双向数据绑定(面试常见)
Apr 20 Javascript
详解VUE调用本地json的使用方法
May 15 Javascript
微信小程序 自定义弹窗实现过程(附代码)
Dec 05 Javascript
解决html按钮切换绑定不同函数后点击时执行多次函数问题
May 14 #Javascript
用jQuery toggleClass 实现鼠标移上变色
May 14 #Javascript
jquery ztree实现下拉树形框使用到了json数据
May 14 #Javascript
JQuery性能优化的几点建议
May 14 #Javascript
js 通过html()及text()方法获取并设置p标签的显示值
May 14 #Javascript
JQuery教学之性能优化
May 14 #Javascript
鼠标左键单击冲突的问题解决方法(防止冒泡)
May 14 #Javascript
You might like
如何跨站抓取别的站点的页面的补充
2006/10/09 PHP
mac环境中使用brew安装php5.5.15
2014/08/18 PHP
php文档工具PHP Documentor安装与使用方法
2016/01/25 PHP
Javascript学习笔记2 函数
2010/01/11 Javascript
Javascript图像处理—为矩阵添加常用方法
2012/12/27 Javascript
js中top/parent/frame概述及案例应用
2013/02/06 Javascript
表单类各种类型(文本框)失去焦点效果jquery代码
2013/04/26 Javascript
jquery实现的树形目录实例
2015/06/26 Javascript
jquery对象和DOM对象的相互转换详解
2016/10/18 Javascript
AngularJS模板加载用法详解
2016/11/04 Javascript
javaScript语法总结
2016/11/25 Javascript
AngularJS入门教程之路由机制ngRoute实例分析
2016/12/13 Javascript
微信小程序 小程序制作及动画(animation样式)详解
2017/01/06 Javascript
利用纯js + transition动画实现移动端web轮播图详解
2017/09/10 Javascript
vue实现简单loading进度条
2018/06/06 Javascript
使用Nuxt.js改造已有项目的方法
2018/08/07 Javascript
微信小程序canvas拖拽、截图组件功能
2018/09/04 Javascript
微信小程序wx.navigateTo方法里的events参数使用详情及场景
2020/01/07 Javascript
微信小程序用canvas画图并分享
2020/03/09 Javascript
vue实现自定义多选按钮
2020/07/16 Javascript
js实现移动端图片滑块验证功能
2020/09/29 Javascript
vue 使用 sortable 实现 el-table 拖拽排序功能
2020/12/26 Vue.js
[02:16]卖萌的僵尸 DOTA2神话信使飞僵小宝来袭
2014/03/24 DOTA
Python实现Const详解
2015/01/27 Python
Python实现将绝对URL替换成相对URL的方法
2015/06/28 Python
Python实现判断字符串中包含某个字符的判断函数示例
2018/01/08 Python
Python+matplotlib实现计算两个信号的交叉谱密度实例
2018/01/08 Python
Python基于pycrypto实现的AES加密和解密算法示例
2018/04/10 Python
python如何查看微信消息撤回
2018/11/27 Python
解决Python plt.savefig 保存图片时一片空白的问题
2019/01/10 Python
Cinque网上商店:德国服装品牌
2019/03/17 全球购物
有原因的手表:Flex Watches
2019/03/23 全球购物
继承时候类的执行顺序问题,一般都是选择题,问你将会打印出什么?
2015/11/18 面试题
音乐器材管理制度
2014/01/31 职场文书
市场部岗位职责范本
2015/04/15 职场文书
肖申克的救赎观后感
2015/06/02 职场文书