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 相关文章推荐
超级强大的表单验证
Jun 26 Javascript
jquery.validate使用攻略 第三部
Jul 01 Javascript
js自定义方法通过隐藏iframe实现文件下载
Feb 21 Javascript
Javascript算符的优先级介绍
Mar 20 Javascript
邮箱下拉自动填充选择示例代码附图
Apr 03 Javascript
JavaScript使用循环和分割来替换和删除元素实例
Oct 13 Javascript
jquery使用正则表达式验证email地址的方法
Jan 22 Javascript
Bootstrap打造一个左侧折叠菜单的系统模板(一)
May 17 Javascript
vue按需加载组件webpack require.ensure的方法
Dec 13 Javascript
vue实例中data使用return包裹的方法
Aug 27 Javascript
IE8中jQuery.load()加载页面不显示的原因
Nov 15 jQuery
浅谈js闭包理解
Mar 28 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
亚洲咖啡有什么?亚洲咖啡产地介绍 亚洲咖啡有什么特点?
2021/03/05 新手入门
记录PHP错误日志 display_errors与log_errors的区别
2012/10/09 PHP
详解php中curl返回false的解决办法
2019/03/18 PHP
IE8 浏览器Cookie的处理
2009/01/31 Javascript
详解JavaScript中的客户端消息框架设计原理
2015/06/24 Javascript
javascript 中的 delete及delete运算符
2015/11/15 Javascript
图解Sublime Text3使用技巧
2015/12/21 Javascript
JavaScript暂停和继续定时器的实现方法
2016/07/18 Javascript
详解Js模板引擎(TrimPath)
2016/11/22 Javascript
微信小程序多张图片上传功能
2017/06/07 Javascript
JavaScript创建对象的七种方式(推荐)
2017/06/26 Javascript
JS+canvas绘制的动态机械表动画效果
2017/09/12 Javascript
详解vue 项目白屏解决方案
2018/10/31 Javascript
一步步教你利用Docker设置Node.js
2018/11/20 Javascript
layui数据表格重载实现往后台传参
2019/11/15 Javascript
vue实现评价星星功能
2020/06/30 Javascript
JavaScript DOM常用操作代码汇总
2020/07/03 Javascript
在vue中实现echarts随窗体变化
2020/07/27 Javascript
[03:21]辉夜杯主赛事 12月25日TOP5
2015/12/26 DOTA
[55:44]完美世界DOTA2联赛决赛 FTD vs Phoenix 第二场 11.08
2020/11/11 DOTA
[06:45]DOTA2-DPC中国联赛 正赛 Magma vs LBZS 选手采访
2021/03/11 DOTA
解决python3 urllib中urlopen报错的问题
2017/03/25 Python
详解python调度框架APScheduler使用
2017/03/28 Python
Python实现字符串逆序输出功能示例
2017/06/24 Python
Python随机生成均匀分布在单位圆内的点代码示例
2017/11/13 Python
pandas的qcut()方法详解
2019/07/06 Python
Python+Redis实现布隆过滤器
2019/12/08 Python
Xadmin+rules实现多选行权限方式(级联效果)
2020/04/07 Python
伦敦一家西班牙童装精品店:La Coqueta
2018/02/02 全球购物
Java的for语句中break, continue和return的区别
2013/12/19 面试题
软件测试工程师面试问题精选
2016/10/28 面试题
自荐信不宜过于夸大
2013/11/06 职场文书
光荣入党自我鉴定
2014/01/22 职场文书
央视元宵晚会主持串词
2014/03/25 职场文书
2015毕业寄语大全
2015/02/26 职场文书
Python序列化模块JSON与Pickle
2022/06/05 Python