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 内存回收机制理解
Jan 17 Javascript
通过JS自动隐藏手机浏览器的地址栏实现原理与代码
Jan 02 Javascript
javascript setinterval 的正确语法如何书写
Jun 17 Javascript
2014年50个程序员最适用的免费JQuery插件
Dec 15 Javascript
Javascript中实现String.startsWith和endsWith方法
Jun 10 Javascript
JS实现延迟隐藏功能的方法(类似QQ头像鼠标放上展示信息)
Dec 28 Javascript
详解关于vue-area-linkage走过的坑
Jun 27 Javascript
解决vue2.0路由跳转未匹配相应用路由避免出现空白页面的问题
Aug 24 Javascript
Javascript实现动态时钟效果
Nov 17 Javascript
React性能优化系列之减少props改变的实现方法
Jan 17 Javascript
微信小程序自定义可滑动顶部TabBar选项卡实现页面切换功能示例
May 14 Javascript
vue-i18n结合Element-ui的配置方法
May 20 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
php获取mysql字段名称和其它信息的例子
2014/04/14 PHP
PHP面向对象程序设计之类常量用法实例
2014/08/20 PHP
php绘制一条弧线的方法
2015/01/24 PHP
日常整理PHP中简单的图形处理(经典)
2015/10/26 PHP
PHP实现基于栈的后缀表达式求值功能
2017/11/10 PHP
PHP封装的非对称加密RSA算法示例
2018/05/28 PHP
用js实现输入提示(自动完成)的实例代码
2013/06/14 Javascript
Javascript 是你的高阶函数(高级应用)
2015/06/15 Javascript
jQuery里filter()函数与find()函数用法分析
2015/06/24 Javascript
分享我对JS插件开发的一些感想和心得
2016/02/04 Javascript
jquery仿QQ登录账号选择下拉框效果
2016/03/22 Javascript
javascript工厂模式和构造函数模式创建对象方法解析
2016/12/30 Javascript
js实现按座位号抽奖
2017/04/05 Javascript
浅谈函数调用的不同方式,以及this的指向
2017/09/17 Javascript
微信小程序实现登录遮罩效果
2018/11/01 Javascript
vue-awesome-swiper 基于vue实现h5滑动翻页效果【推荐】
2018/11/08 Javascript
Vue+Element UI+vue-quill-editor富文本编辑器及插入图片自定义
2019/08/20 Javascript
python中返回矩阵的行列方法
2018/04/04 Python
python文件写入write()的操作
2019/05/14 Python
Python实现初始化不同的变量类型为空值
2020/06/02 Python
解决redis与Python交互取出来的是bytes类型的问题
2020/07/16 Python
python装饰器代码深入讲解
2021/03/01 Python
彼得罗夫美国官网:Peter Thomas Roth美国(青瓜面膜)
2017/11/05 全球购物
朗仕(Lab series)英国官网:雅诗兰黛集团男士专属护肤品牌
2017/11/28 全球购物
TripAdvisor斯洛伐克:阅读评论、比较价格和酒店预订
2018/04/25 全球购物
Booking.com缤客中国:全球酒店在线预订网站
2020/05/03 全球购物
请写一个C函数,若处理器是Big_endian的,则返回0;若是Little_endian的,则返回1
2015/07/16 面试题
Overload和Override的区别
2012/09/02 面试题
马云的职业生涯规划之路
2014/01/01 职场文书
电子银行营销方案
2014/02/22 职场文书
大学生全国两会报告感想
2014/03/17 职场文书
群众路线教育实践活动总结
2014/10/30 职场文书
幼儿园春季开学通知
2015/07/16 职场文书
唱歌比赛拉拉队口号
2015/12/25 职场文书
深入理解go缓存库freecache的使用
2022/02/15 Golang