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实现复制功能各浏览器支持情况实测
Jul 18 Javascript
js+html5实现canvas绘制镂空字体文本的方法
Jun 05 Javascript
javascript的列表切换【实现代码】
May 03 Javascript
AngularJS下对数组的对比分析
Aug 24 Javascript
老生常谈JavaScript 函数表达式
Sep 01 Javascript
微信小程序之小豆瓣图书实例
Nov 30 Javascript
深入理解javascript中concat方法
Dec 12 Javascript
详解vue-cli快速构建项目以及引入bootstrap、jq
May 26 Javascript
nuxt配置通过指定IP和端口访问的实现
Jan 08 Javascript
Vue数字输入框组件示例代码详解
Jan 15 Javascript
TensorFlow.js 微信小程序插件开始支持模型缓存的方法
Feb 21 Javascript
微信小程序中的列表切换功能实例代码详解
Jun 09 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实现图片压缩的两则实例
2014/07/19 PHP
简单实用的PHP防注入类实例
2014/12/05 PHP
讨论javascript(一)工厂方式 js面象对象的定义方法
2009/12/15 Javascript
jsTree 基于JQuery的排序节点 Bug
2011/07/26 Javascript
JS+CSS 制作的超级简单的下拉菜单附图
2013/11/22 Javascript
jQuery实现切换字体大小的方法
2015/03/10 Javascript
js变量提升深入理解
2016/09/16 Javascript
node.js版本管理工具n无效的原理和解决方法
2016/11/24 Javascript
Angular 2父子组件数据传递之局部变量获取子组件其他成员
2017/07/04 Javascript
Vue学习笔记进阶篇之单元素过度
2017/07/19 Javascript
node使用Koa2搭建web项目的方法
2017/10/17 Javascript
vue组件之间的数据传递方法详解
2019/04/19 Javascript
vue组件 keep-alive 和 transition 使用详解
2019/10/11 Javascript
JavaScript实现滚动加载更多
2020/12/27 Javascript
Python通过命令开启http.server服务器的方法
2017/11/04 Python
Python实现的随机森林算法与简单总结
2018/01/30 Python
浅谈pytorch和Numpy的区别以及相互转换方法
2018/07/26 Python
Win8.1下安装Python3.6提示0x80240017错误的解决方法
2018/07/31 Python
浅谈python str.format与制表符\t关于中文对齐的细节问题
2019/01/14 Python
python pandas获取csv指定行 列的操作方法
2019/07/12 Python
django迁移数据库错误问题解决
2019/07/29 Python
Python获取当前脚本文件夹(Script)的绝对路径方法代码
2019/08/27 Python
CSS3打造磨砂玻璃背景效果
2016/09/28 HTML / CSS
千禧酒店及度假村官方网站:Millennium Hotels and Resorts
2019/05/10 全球购物
我们在web应用开发过程中经常遇到输出某种编码的字符,如iso8859-1等,如何输出一个某种编码的字符串?
2014/03/30 面试题
学校安全责任书范本
2014/07/23 职场文书
大学生党校培训心得体会
2014/09/11 职场文书
售后客服个人自我评价
2014/09/14 职场文书
第二批党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
政府班子四风问题整改措施
2014/10/04 职场文书
2015年教师新年寄语
2014/12/08 职场文书
2014年客服工作总结与计划
2014/12/09 职场文书
民间借贷借条范本
2015/05/25 职场文书
2015年暑期实践报告范文
2015/07/13 职场文书
青年志愿者活动感想
2015/08/07 职场文书
交通安全宣传标语(100条)
2019/08/22 职场文书