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 相关文章推荐
JCalendar 日历控件 v1.0 beta[兼容IE&amp;Firefox] 有文档和例子
May 30 Javascript
jQuery获取文本节点之 text()/val()/html() 方法区别
Mar 01 Javascript
jQuery表单验证插件formValidator(改进版)
Feb 03 Javascript
JS实现倒计时和文字滚动的效果实例
Oct 29 Javascript
angularjs中的单元测试实例
Dec 06 Javascript
jQuery+CSS实现的网页二级下滑菜单效果
Aug 25 Javascript
Javascript 链式作用域详细介绍
Feb 23 Javascript
Vue2.0 事件的广播与接收(观察者模式)
Mar 14 Javascript
javascript中如何判断类型汇总
May 14 Javascript
react 组件传值的三种方法
Jun 03 Javascript
js、jquery实现列表模糊搜索功能过程解析
Mar 27 jQuery
使用next.js开发网址缩短服务的方法
Jun 17 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
DOTA2【瓜皮时刻】Vol.91 RTZ山史最惨“矿难”
2021/03/05 DOTA
如何利用PHP执行.SQL文件
2013/07/05 PHP
Zend Framework上传文件重命名的实现方法
2016/11/25 PHP
PHP正则之正向预查与反向预查讲解与实例
2020/04/06 PHP
javascript 去字符串空格终极版(支持utf8)
2009/11/14 Javascript
JS在IE和FireFox之间常用函数的区别小结
2010/03/12 Javascript
JQuery 操作select标签实现代码
2010/05/14 Javascript
用jquery存取照片的具体实现方法
2013/06/30 Javascript
ajax与302响应代码测试
2013/10/23 Javascript
浅析jquery某一元素重复绑定的问题
2014/01/03 Javascript
jQuery表格排序组件-tablesorter使用示例
2014/05/26 Javascript
vue.js指令v-model实现方法
2016/12/05 Javascript
vue Render中slots的使用的实例代码
2017/07/19 Javascript
微信小程序实战篇之购物车的实现代码示例
2017/11/30 Javascript
vue axios 二次封装的示例代码
2017/12/08 Javascript
node.js用fs.rename强制重命名或移动文件夹的方法
2017/12/27 Javascript
node中间层实现文件上传功能
2018/06/11 Javascript
Python实现在线程里运行scrapy的方法
2015/04/07 Python
Python实现带参数与不带参数的多重继承示例
2018/01/30 Python
使用Python的toolz库开始函数式编程的方法
2018/11/15 Python
Ubuntu18.04下python版本完美切换的解决方法
2019/06/14 Python
Django用户认证系统 组与权限解析
2019/08/02 Python
python实现堆排序的实例讲解
2020/02/21 Python
Python调用C/C++的方法解析
2020/08/05 Python
机械电子工程专业推荐信范文
2013/11/20 职场文书
修理厂厂长岗位职责
2014/01/30 职场文书
网络管理专业求职信
2014/03/15 职场文书
表彰大会主持词
2014/03/26 职场文书
兴趣小组活动总结
2014/05/05 职场文书
伦敦奥运会口号
2014/06/13 职场文书
学雷锋宣传标语
2014/06/25 职场文书
国家奖学金获奖感言
2014/08/16 职场文书
商场广播稿范文
2015/08/19 职场文书
高三物理教学反思
2016/02/20 职场文书
Java9新特性之Module模块化编程示例演绎
2022/03/16 Java/Android
Android自定义ScrollView实现阻尼回弹
2022/04/01 Java/Android