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 相关文章推荐
jquery 选项卡效果 新手代码
Jul 08 Javascript
jQuery 中使用JSON的实现代码
Dec 01 Javascript
JavaScript中的类数组对象介绍
Dec 30 Javascript
纯JavaScript实现的兼容各浏览器的添加和移除事件封装
Mar 28 Javascript
JavaScript实现梯形乘法表的方法
Apr 25 Javascript
JS实现从网页顶部掉下弹出层效果的方法
Aug 06 Javascript
jQuery下拉美化搜索表单效果代码分享
Aug 25 Javascript
jQuery mobile 移动web(6)
Dec 20 Javascript
JavaScript代码性能优化总结(推荐)
May 16 Javascript
jQuery 常用代码集锦(必看篇)
May 16 Javascript
js精确的加减乘除实例
Nov 14 Javascript
深入了解JavaScript 的 WebAssembly
Jun 15 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
php4的session功能评述(二)
2006/10/09 PHP
PHP 简单数组排序实现代码
2009/08/05 PHP
11个PHP 分页脚本推荐
2011/08/15 PHP
深入理解用mysql_fetch_row()以数组的形式返回查询结果
2013/06/05 PHP
PHP中引用类型和值类型功能与用法示例
2019/02/26 PHP
Laravel实现ORM带条件搜索分页
2019/10/24 PHP
Google韩国首页图标动画效果
2007/08/26 Javascript
关于javascript中this关键字(翻译+自我理解)
2010/10/20 Javascript
javascript中this做事件参数相关问题解答
2013/03/17 Javascript
你必须知道的Javascript知识点之&quot;字面量和对应类型&quot;说明介绍
2013/04/23 Javascript
js获取指定日期周数以及星期几的小例子
2014/06/27 Javascript
jquery bind(click)传参让列表中每行绑定一个事件
2014/08/06 Javascript
Javascript仿新浪游戏频道鼠标悬停显示子菜单效果
2015/08/21 Javascript
js实现带农历和八字等信息的日历特效
2016/05/16 Javascript
jQuery获取select选中的option的value值实现方法
2016/08/29 Javascript
js实现可输入可选择的select下拉框
2016/12/21 Javascript
微信小程序 slider 详解及实例代码
2017/01/10 Javascript
基于JavaScript实现带缩略图的轮播效果
2017/01/12 Javascript
vue-cli3 karma单元测试的实现
2019/01/18 Javascript
浅析Python中将单词首字母大写的capitalize()方法
2015/05/18 Python
python 获取网页编码方式实现代码
2017/03/11 Python
python利用高阶函数实现剪枝函数
2018/03/20 Python
python十进制和二进制的转换方法(含浮点数)
2018/07/07 Python
解决python给列表里添加字典时被最后一个覆盖的问题
2019/01/21 Python
Python 实现微信防撤回功能
2019/04/29 Python
Python中使用threading.Event协调线程的运行详解
2020/05/02 Python
python之随机数函数的实现示例
2020/12/30 Python
如何使用Python进行PDF图片识别OCR
2021/01/22 Python
如何进行Linux分区优化
2016/09/13 面试题
成品仓管员工作职责
2013/12/29 职场文书
关于环保的建议书
2014/05/12 职场文书
高考励志标语
2014/06/05 职场文书
中学生打架检讨书
2014/10/13 职场文书
工作失职自我检讨书
2015/05/05 职场文书
公司2015年终工作总结
2015/05/26 职场文书
windows下快速安装nginx并配置开机自启动的方法
2021/05/11 Servers