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在IE和Firefox(火狐)的不兼容问题解决方法小结
Apr 13 Javascript
Javascript的getYear、getFullYear、getUTCFullYear异同分享
Nov 30 Javascript
使用js实现雪花飘落效果
Aug 26 Javascript
自己写的Javascript计算时间差函数
Oct 28 Javascript
js获取当前页面路径示例讲解
Jan 08 Javascript
js控制iframe的高度/宽度让其自适应内容
Apr 09 Javascript
JavaScript实现Iterator模式实例分析
Jun 09 Javascript
jQuery实现图片左右滚动特效
Apr 20 Javascript
JS实现仿微博可关闭弹出层效果
Sep 21 Javascript
Angularjs 实现一个幻灯片示例代码
Sep 08 Javascript
lhgcalendar时间插件限制只能选择三个月的实现方法
Jul 03 Javascript
Node.js  事件循环详解及实例
Aug 06 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原理之异常机制
2010/08/21 PHP
linux系统下php安装mbstring扩展的二种方法
2014/01/20 PHP
自己写的php中文截取函数mb_strlen和mb_substr
2015/02/09 PHP
PHP实现简单汉字验证码
2015/07/28 PHP
PHP读取word文档的方法分析【基于COM组件】
2017/08/01 PHP
微信公众平台开发教程⑥ 微信开发集成类的使用图文详解
2019/04/10 PHP
初识JQuery 实例一(first)
2011/03/16 Javascript
如何将一个String和多个String值进行比较思路分析
2013/04/22 Javascript
JavaScript简单实现网页回到顶部功能
2013/11/12 Javascript
如何通过js实现图片预览功能【附实例代码】
2016/03/30 Javascript
Node.js服务器开启Gzip压缩教程
2017/08/11 Javascript
Vue中的methods、watch、computed的区别
2018/11/26 Javascript
一个小时快速搭建微信小程序的方法步骤
2019/04/15 Javascript
Vue实现渲染数据后控制滚动条位置(推荐)
2019/12/09 Javascript
JavaScript对象原型链原理详解
2020/02/05 Javascript
JS 设计模式之:单例模式定义与实现方法浅析
2020/05/06 Javascript
ES6箭头函数和扩展实例分析
2020/05/23 Javascript
Jquery ajax书写方法代码实例解析
2020/06/12 jQuery
Python中处理unchecked未捕获异常实例
2015/01/17 Python
CentOS6.5设置Django开发环境
2016/10/13 Python
python使用pandas实现数据分割实例代码
2018/01/25 Python
Python实现的矩阵转置与矩阵相乘运算示例
2019/03/26 Python
使用Python中的reduce()函数求积的实例
2019/06/28 Python
Django接收post前端返回的json格式数据代码实现
2019/07/31 Python
vscode写python时的代码错误提醒和自动格式化的方法
2020/05/07 Python
使用keras实现Precise, Recall, F1-socre方式
2020/06/15 Python
CSS3旋转——彩色扇子兼容firefox浏览器
2013/06/04 HTML / CSS
css3 中translate和transition的使用方法
2020/03/26 HTML / CSS
html5-websocket基于远程方法调用的数据交互实现
2012/12/04 HTML / CSS
新闻系毕业生推荐信
2013/11/16 职场文书
文科教师毕业的自我评价
2014/01/16 职场文书
英文求职信写作小建议
2014/02/16 职场文书
抵押贷款承诺书
2014/05/30 职场文书
毕业生工作求职信
2014/06/30 职场文书
离婚起诉书范本
2015/05/18 职场文书
Python IO文件管理的具体使用
2022/03/20 Python