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 相关文章推荐
判断页面是关闭还是刷新的js代码
Jan 28 Javascript
鼠标放在图片上显示大图的JS代码
Mar 26 Javascript
JavaScript中的函数重载深入理解
Aug 04 Javascript
JavaScript实现重置表单(reset)的方法
Apr 02 Javascript
jquery获取多个checkbox的值异步提交给php
Jul 07 Javascript
JS及PHP代码编写八大排序算法
Jul 12 Javascript
静态页面实现 include 引入公用代码的示例
Sep 25 Javascript
XMLHttpRequest对象_Ajax异步请求重点(推荐)
Sep 28 Javascript
jquery使用iscorll实现上拉、下拉加载刷新
Oct 26 jQuery
Vue Promise的axios请求封装详解
Aug 13 Javascript
js常用正则表达式集锦
May 17 Javascript
nginx配置域名后的二级目录访问不同项目的配置操作
Nov 06 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
在线竞拍系统的PHP实现框架(二)
2006/10/09 PHP
php模板之Phpbean的目录结构
2008/01/10 PHP
php中通过curl模拟登陆discuz论坛的实现代码
2012/02/16 PHP
根据中文裁减字符串函数的php代码
2013/12/03 PHP
ThinkPHP的MVC开发机制实例解析
2014/08/23 PHP
PHP使用array_fill定义多维数组的方法
2015/03/18 PHP
ExtJs扩展之GroupPropertyGrid代码
2010/03/05 Javascript
javascript:void(0)的作用示例介绍
2013/10/28 Javascript
Jquery通过Ajax方式来提交Form表单的具体实现
2013/11/07 Javascript
jQuery拖动div、移动div、弹出层实现原理及示例
2014/04/08 Javascript
PHP+jQuery+Ajax实现多图片上传效果
2015/03/14 Javascript
JavaScript实现自动消除按钮功能的方法
2015/08/05 Javascript
JS实现环形进度条(从0到100%)效果
2016/07/05 Javascript
浅谈angular懒加载的一些坑
2016/08/20 Javascript
移动端js触摸事件详解
2016/09/18 Javascript
浅谈javascript:两种注释,声明变量,定义函数
2016/10/05 Javascript
js实现鼠标左右移动,图片也跟着移动效果
2017/01/25 Javascript
jquery实现轮播图效果
2017/02/13 Javascript
vuex学习之Actions的用法详解
2017/08/29 Javascript
微信小程序顶部可滚动导航效果
2017/10/31 Javascript
关于jquery中attr()和prop()方法的区别
2018/05/28 jQuery
vue+express 构建后台管理系统的示例代码
2018/07/19 Javascript
浅谈webpack SplitChunksPlugin实用指南
2018/09/17 Javascript
详解swiper在vue中的应用(以3.0为例)
2018/09/20 Javascript
webpack 最佳配置指北(推荐)
2020/01/07 Javascript
javascript浅层克隆、深度克隆对比及实例解析
2020/02/09 Javascript
详解javascript void(0)
2020/07/13 Javascript
uniapp实现横向滚动选择日期
2020/10/21 Javascript
python实现中文输出的两种方法
2015/05/09 Python
Python正则抓取新闻标题和链接的方法示例
2017/04/24 Python
Python Flask基础教程示例代码
2018/02/07 Python
pandas or sql计算前后两行数据间的增值方法
2018/04/20 Python
详解python执行shell脚本创建用户及相关操作
2019/04/11 Python
python文件写入write()的操作
2019/05/14 Python
Django Serializer HiddenField隐藏字段实例
2020/03/31 Python
节约能源标语
2014/06/17 职场文书