js document.write()使用介绍


Posted in Javascript onFebruary 21, 2014

在载人页面后,浏览器输出流自动关闭;在此之后,任何一个对当前页面进行操作的document.write()方法将打开—个新的输出流。它将清除当前页面内容(包括源文档的任何变量或值)、因此.假如希望用脚本生成的HTML替换当前页面,就必须把HTML内容连接起来赋给一个变量、使用一个document.write()方法完成写操作,不必清除文档并打开一个新数据流,一个document.write()调用就可完成所有的操作。

关于document.write()方法还有一点要说明的是它的相关方法document.close()。脚本向窗口(不管是本窗口或其他窗口)写完内容后.必须关闭输出流。在延时脚本的最后一个document.write()方法后面.必须确保含有document.close()方法,不这样做就不能显示图片和表单。并且,任何后面调用的document.write()方法只会把内容追加到页面后,而不会清除现有内容来写入新值。

document.write方法

一个最基本的JavaScript命令是document.write。这个命令简单地打印指定的文本内容到页面上。为了逐字打印文本,在打印的文本字符串加上单引号。

document.write('Hello World!'); 

上面的js代码将会在页面上显示出"Hello World!"
你可以使用document.write 打印变量。输入变量名称不加上引号,如下:

var mytext = "Hello again";
document.write(mytext);

注意:如果变量名称加上引号,将会打印出变量名称(不会打印变量值)。你可以使用“+”符号来连接变量值和文本字符串。

var colour1 = "purple";   
var colour2 = "pink";
document.write('<p>colour1: ' + colour1 + '<br>colour2: ' + colour2 + '</p>'); 

打印结果如下:

colour1: purple
colour2: pink

document.write也多用于加载js广告

document.write('<scri'+'pt src="https://3water.com/ad.js" type="text/javascript"></s'+'cript>');
document.write("<scri"+"pt src='https://3water.com/ad.js' type='text/javascript'></s"+"cript>");
document.write("<scri"+"pt src=\"https://3water.com/ad.js\" type=\"text/javascript\"></s"+"cript>");

一般外面用单引号(双引号)连接字符,里面的就要用双信号(单引号),这样就不会错了。当然也可以用转义字符,但这样以后修改比较麻烦。

document.write这种方式加载的js是异步的

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ru">
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html;charset=gb2312">    
    </head>    
    <script type="text/javascript">
    function load(js){
    var s = document.createElement('script');  
    s.setAttribute('type','text/javascript');  
    s.setAttribute('src',js);  
    var head = document.getElementsByTagName('head');  
    head[0].appendChild(s);      }
    function write(js){
    document.write('<script type="text/javascript" src="'+js+'" > <\/script>');
    }   
           load("https://3water.com/js/2011/jquery-1.5.1.min.js"); 
          // write("https://3water.com/js/2011/jquery-1.5.1.min.js");
   </script>
<script>
alert($);
</script>

问: 用createElement("script")的方式加载,调用函数就会报错,用document.write就不报错?

答案:

对于动态创建的js 引用而言 ,针对不同的浏览器有不同的反应  
楼主的这种写法 对 FF Opera 而言 load 方法是阻塞的 故alert($)能输出,而对IE Chrome Safria 而言 是非阻塞的 所以就会报错 
而document.write的方式,对所有浏览器而言都是阻塞的 即同步的 所以alert($)会输出正确结果

Javascript 相关文章推荐
JavaScript 高效运行代码分析
Mar 18 Javascript
通过Jquery遍历Json的两种数据结构的实现代码
Jan 19 Javascript
网站内容禁止复制和粘贴、另存为的js代码
Feb 26 Javascript
fckeditor粘贴Word时弹出窗口取消的方法
Oct 30 Javascript
JQuery选择器绑定事件及修改内容的方法
Jan 23 Javascript
js实现点击图片改变页面背景图的方法
Feb 28 Javascript
JavaScript基础知识之方法汇总结
Jan 24 Javascript
详解在vue-cli项目中安装node-sass
Jun 21 Javascript
js中this对象用法分析
Jan 05 Javascript
vue+webpack中配置ESLint
Nov 07 Javascript
vue同个按钮控制展开和折叠同个事件操作
Jul 29 Javascript
OpenLayers3实现地图鹰眼以及地图比例尺的添加
Sep 25 Javascript
jQuery写fadeTo示例代码
Feb 21 #Javascript
iframe父页面获取子页面参数的方法
Feb 21 #Javascript
表单序列化与jq中的serialize使用示例
Feb 21 #Javascript
常规表格多表头查询示例
Feb 21 #Javascript
Javascript中引用示例介绍
Feb 21 #Javascript
jquery解析XML字符串和XML文件的方法说明
Feb 21 #Javascript
js 删除数组的几种方法小结
Feb 21 #Javascript
You might like
修改Zend引擎实现PHP源码加密的原理及实践
2008/04/14 PHP
利用Laravel事件系统如何实现登录日志的记录详解
2017/05/20 PHP
Javascript 中的类和闭包
2010/01/08 Javascript
JavaScript下利用fso判断文件是否存在的代码
2010/12/11 Javascript
基于JQuery的动态删除Table表格的行和列的代码
2011/05/12 Javascript
Prototype源码浅析 String部分(四)之补充
2012/01/16 Javascript
基于jquery的鼠标拖动效果代码
2012/05/30 Javascript
JsRender for object语法简介
2014/10/31 Javascript
javascript等号运算符使用详解
2015/04/16 Javascript
JavaScript的Vue.js库入门学习教程
2016/05/23 Javascript
JavaScript 数组的深度复制解析
2016/11/02 Javascript
浅析JavaScript中作用域和作用域链
2016/12/06 Javascript
jQuery快速高效制作网页交互特效
2017/02/24 Javascript
微信小程序 空白页重定向解决办法
2017/06/27 Javascript
JS实现图片放大镜插件详解
2017/11/06 Javascript
vue $set 给数据赋值的实例
2019/11/09 Javascript
javascript实现点击星星小游戏
2019/12/24 Javascript
[01:23:59]2018DOTA2亚洲邀请赛 4.1 小组赛 B组 VP vs Secret
2018/04/03 DOTA
Python+django实现文件下载
2016/01/17 Python
微信小程序跳一跳游戏 python脚本跳一跳刷高分技巧
2018/01/04 Python
Django2.1.3 中间件使用详解
2018/11/26 Python
python编写一个会算账的脚本的示例代码
2020/06/02 Python
django inspectdb 操作已有数据库数据的使用步骤
2021/02/07 Python
意大利单身交友网站:Meetic
2020/07/12 全球购物
办公室主任岗位职责
2013/11/08 职场文书
业务总经理岗位职责
2014/02/03 职场文书
房屋买卖协议书范本
2014/04/10 职场文书
《放飞蜻蜓》教学反思
2014/04/27 职场文书
保护环境倡议书500字
2014/05/19 职场文书
国际商务英语专业求职信
2014/07/08 职场文书
纪检干部对照检查材料
2014/08/22 职场文书
党员教师四风自我剖析材料
2014/09/30 职场文书
人力资源部岗位职责
2015/02/11 职场文书
党员证明信
2015/06/19 职场文书
毕业班工作总结
2015/08/10 职场文书
导游词之苏州寒山寺
2019/12/05 职场文书