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 相关文章推荐
BOM与DOM的区别分析
Oct 26 Javascript
JS+CSS 制作的超级简单的下拉菜单附图
Nov 22 Javascript
js function定义函数的几种不错方法
Feb 27 Javascript
jquery文本框中的事件应用以输入邮箱为例
May 06 Javascript
基于jQuery实现发送短信验证码后的倒计时功能(无视页面关闭)
Sep 02 Javascript
Vue 2.0 服务端渲染入门介绍
Mar 29 Javascript
微信小程序实现点击文字页面跳转功能【附源码下载】
Dec 12 Javascript
express + jwt + postMan验证实现持久化登录
Jun 05 Javascript
使用Vue-Awesome-Swiper实现旋转叠加轮播效果&amp;平移轮播效果
Aug 16 Javascript
node爬取新型冠状病毒的疫情实时动态
Feb 06 Javascript
vue+animation实现翻页动画
Jun 29 Javascript
Vue清除定时器setInterval优化方案分享
Jul 21 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的list()的一步操作给一组变量进行赋值的使用
2011/05/18 PHP
PHP+jQuery 注册模块的改进(一):验证码存入SESSION
2014/10/14 PHP
php操作redis缓存方法分享
2015/06/03 PHP
PHP中SSO Cookie登录分析和实现
2015/11/06 PHP
利用JQuery为搜索栏增加tag提示
2009/06/22 Javascript
jquery 仿QQ校友的DIV模拟窗口效果源码
2010/03/24 Javascript
在JavaScript中使用JSON数据
2016/02/15 Javascript
js字符串截取函数slice、substring和substr的比较
2016/05/17 Javascript
Vue.js双向绑定操作技巧(初级入门)
2016/12/27 Javascript
windows下vue-cli导入bootstrap样式
2017/04/25 Javascript
bootstrap table实现点击翻页功能 可记录上下页选中的行
2017/09/28 Javascript
如何去除vue项目中的#及其ie9兼容性
2018/01/11 Javascript
微信小程序实现图片预览功能
2018/01/31 Javascript
微信小程序之事件交互操作实例分析
2018/12/03 Javascript
layui加载表格,绑定新增,编辑删除,查看按钮事件的例子
2019/09/06 Javascript
解决antd 表单设置默认值initialValue后验证失效的问题
2020/11/02 Javascript
python3编码问题汇总
2016/09/06 Python
Python基于回溯法子集树模板解决m着色问题示例
2017/09/07 Python
Python Scapy随心所欲研究TCP协议栈
2018/11/20 Python
详解Python连接MySQL数据库的多种方式
2019/04/16 Python
python切片(获取一个子列表(数组))详解
2019/08/09 Python
详解Django CAS 解决方案
2019/10/30 Python
YUV转为jpg图像的实现
2019/12/09 Python
Python如何用filter函数筛选数据
2020/03/05 Python
使用HTML5的File实现base64和图片的互转
2013/08/01 HTML / CSS
英国花园药房: The Garden Pharmacy
2017/12/28 全球购物
美国高级音响品牌:Master&Dynamic
2018/07/05 全球购物
Linux文件操作命令都有哪些
2016/07/23 面试题
初一生物教学反思
2014/01/18 职场文书
会计毕业自我鉴定
2014/02/05 职场文书
挂牌仪式策划方案
2014/05/18 职场文书
商务经理岗位职责
2014/08/03 职场文书
企业领导班子四风对照检查材料
2014/09/27 职场文书
2014年人事工作总结范文
2014/11/19 职场文书
2015年食堂工作总结报告
2015/04/23 职场文书
如何让vue长列表快速加载
2021/03/29 Vue.js