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 相关文章推荐
几行代码轻松搞定jquery实现flash8类似的连接效果
May 03 Javascript
jQuery表格插件datatables用法总结
Sep 05 Javascript
jQuery实现非常实用漂亮的select下拉菜单选择效果
Nov 06 Javascript
AngularJS入门教程之双向绑定详解
Aug 18 Javascript
jQuery实现的自适应焦点图效果完整实例
Aug 24 Javascript
使用jQuery的ajax方法向服务器发出get和post请求的方法
Jan 13 Javascript
关于vue.js v-bind 的一些理解和思考
Jun 06 Javascript
Vue2.5通过json文件读取数据的方法
Feb 27 Javascript
vue插件开发之使用pdf.js实现手机端在线预览pdf文档的方法
Jul 12 Javascript
使用Vue做一个简单的todo应用的三种方式的示例代码
Oct 20 Javascript
Vue项目打包部署到iis服务器的配置方法
Oct 14 Javascript
JavaScript前端实现压缩图片功能
Mar 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 缓存函数代码
2008/08/27 PHP
php 静态页面中显示动态内容
2009/08/14 PHP
php获取通过http协议post提交过来xml数据及解析xml
2012/12/16 PHP
PHP实现的sqlite数据库连接类
2014/12/12 PHP
php通过function_exists检测函数是否存在的方法
2015/03/18 PHP
PHP实现的memcache环形队列类实例
2015/07/28 PHP
PHP代码优化技巧小结
2015/09/29 PHP
PHPCMS2008广告模板SQL注入漏洞修复
2016/10/11 PHP
Laravel中的Blade模板引擎示例详解
2017/10/10 PHP
PHP扩展Swoole实现实时异步任务队列示例
2019/04/13 PHP
在你的网页中嵌入外部网页的方法
2007/04/02 Javascript
JavaScript Title、alt提示(Tips)实现源码解读
2010/12/12 Javascript
Bootstrap 粘页脚效果
2016/03/28 Javascript
Bootstrap3制作自己的导航栏
2016/05/12 Javascript
十大 Node.js 的 Web 框架(快速提升工作效率)
2017/06/30 Javascript
微信小程序实现换肤功能
2018/03/14 Javascript
详解如何用webpack4从零开始构建react开发环境
2019/01/27 Javascript
新手快速上手webpack4打包工具的使用详解
2019/01/28 Javascript
Node.js原生api搭建web服务器的方法步骤
2019/02/15 Javascript
Vue实现按钮级权限方案
2019/11/21 Javascript
谈一谈vue请求数据放在created好还是mounted里好
2020/07/27 Javascript
Vue 请求传公共参数的操作
2020/07/31 Javascript
[47:43]Alliance vs KG 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
使用Python对Access读写操作
2017/03/30 Python
python基础教程项目二之画幅好画
2018/04/02 Python
Python爬虫实现(伪)球迷速成
2018/06/10 Python
Pandas读取并修改excel的示例代码
2019/02/17 Python
Django网络框架之创建虚拟开发环境操作示例
2019/06/06 Python
python sorted函数的小练习及解答
2019/09/18 Python
Python中格式化字符串的四种实现
2020/05/26 Python
英国在线定做百叶窗网站:Make My Blinds
2020/08/17 全球购物
为什么Runtime.exec(“ls”)没有任何输出?
2014/10/03 面试题
80后职场人的职业生涯规划
2014/03/08 职场文书
医院见习报告范文
2014/11/03 职场文书
2014年人大工作总结
2014/12/10 职场文书
先进党支部事迹材料2016
2016/02/26 职场文书