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 对象比较实现代码
Apr 27 Javascript
Javascript Math对象
Aug 13 Javascript
jquery.artwl.thickbox.js  一个非常简单好用的jQuery弹出层插件
Mar 01 Javascript
利用js读取动态网站从服务器端返回的数据
Feb 10 Javascript
jQuery javascript获得网页的高度与宽度的实现代码
Apr 26 Javascript
AngularJS 路由和模板实例及路由地址简化方法(必看)
Jun 24 Javascript
JS实用的带停顿的逐行文本循环滚动效果实例
Nov 23 Javascript
vue中如何实现变量和字符串拼接
Jun 19 Javascript
理解javascript async的用法
Aug 22 Javascript
ES6中new Function()语法及应用实例分析
Feb 19 Javascript
使用react+redux实现计数器功能及遇到问题
Jun 02 Javascript
详解JavaScript的计时器和按钮效果设置
Feb 18 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
PHP 采集程序中常用的函数
2009/12/09 PHP
php入门学习知识点二 PHP简单的分页过程与原理
2011/07/14 PHP
PHP中spl_autoload_register()和__autoload()区别分析
2014/05/10 PHP
PHP使用pear自带的mail类库发邮件的方法
2015/07/08 PHP
laravel5.1框架model类查询的实现方法
2019/10/08 PHP
DOM精简教程
2006/10/03 Javascript
关于跨站脚本攻击问题
2011/12/22 Javascript
利用div+jquery自定义滚动条样式的2种方法
2013/07/18 Javascript
基于NodeJS的前后端分离的思考与实践(四)安全问题解决方案
2014/09/26 NodeJs
JavaScript前端图片加载管理器imagepool使用详解
2014/12/29 Javascript
在for循环中length值是否需要缓存
2015/07/27 Javascript
jQuery UI库中dialog对话框功能使用全解析
2016/04/23 Javascript
JS采用绝对定位实现回到顶部效果完整实例
2016/06/20 Javascript
jquery.cookie.js的介绍与使用方法
2017/02/09 Javascript
详解基于Node.js的微信JS-SDK后端接口实现代码
2017/07/15 Javascript
cocos creator Touch事件应用(触控选择多个子节点的实例)
2017/09/10 Javascript
基于JavaScript实现幸运抽奖页面
2020/07/05 Javascript
JavaScript中call和apply方法的区别实例分析
2018/08/03 Javascript
Vue组件模板的几种书写形式(3种)
2020/02/19 Javascript
javascript canvas实现简易时钟例子
2020/09/05 Javascript
Python 文件和输入输出小结
2013/10/09 Python
Redis使用watch完成秒杀抢购功能的代码
2018/05/07 Python
基于anaconda下强大的conda命令介绍
2018/06/11 Python
python3.X 抓取火车票信息【修正版】
2018/06/19 Python
一文带你了解Python中的字符串是什么
2018/11/20 Python
Python Pandas 获取列匹配特定值的行的索引问题
2019/07/01 Python
用Python在Excel里画出蒙娜丽莎的方法示例
2020/04/28 Python
四风对照检查材料范文
2014/09/27 职场文书
2014年班主任德育工作总结
2014/12/05 职场文书
2015年保洁员工作总结
2015/05/04 职场文书
校友会致辞
2015/07/30 职场文书
学生会任命书范本
2015/09/21 职场文书
六五普法心得体会2016
2016/01/21 职场文书
MySQL主从复制断开的常用修复方法
2021/04/07 MySQL
Keras在mnist上的CNN实践,并且自定义loss函数曲线图操作
2021/05/25 Python
Android基于Fresco实现圆角和圆形图片
2022/04/01 Java/Android