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作一个通用向导说明
Aug 30 Javascript
jquery getScript动态加载JS方法改进详解
Nov 15 Javascript
js中创建对象的几种方式示例介绍
Jan 26 Javascript
JavaScript学习笔记之内置对象
Jan 22 Javascript
JavaScript中的各种操作符使用总结
May 26 Javascript
js canvas仿支付宝芝麻信用分仪表盘
Nov 16 Javascript
JS插件plupload.js实现多图上传并显示进度条
Nov 29 Javascript
vue axios用法教程详解
Jul 23 Javascript
对node.js中render和send的用法详解
May 14 Javascript
取消Bootstrap的dropdown-menu点击默认关闭事件方法
Aug 10 Javascript
Vuex的actions属性的具体使用
Apr 14 Javascript
JavaScript类的继承多种实现方法
May 30 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常用开发函数解析之数组篇[未完结]
2012/07/30 PHP
web server使用php生成web页面的三种方法总结
2013/10/28 PHP
使用PHP curl模拟浏览器抓取网站信息
2013/10/28 PHP
ThinkPHP之R方法实例详解
2014/06/20 PHP
php获取、检查类名、函数名、方法名的函数方法
2015/06/25 PHP
PHP编程计算两个时间段是否有交集的实现方法(不算边界重叠)
2017/05/30 PHP
TNC vs BOOM BO3 第一场2.13
2021/03/10 DOTA
DEFER怎么用?
2006/07/01 Javascript
xml 与javascript结合的问题解决方法
2007/03/24 Javascript
Asp.net下使用Jquery Ajax传送和接收DataTable的代码
2010/09/12 Javascript
js判断元素是否隐藏的方法
2014/06/09 Javascript
javascript 面向对象封装与继承
2014/11/27 Javascript
JS是按值传递还是按引用传递
2015/01/30 Javascript
jquery实现点击变换导航样式的方法
2015/08/31 Javascript
最常用的jQuery表单验证(简单)
2017/05/23 jQuery
Node.JS更改Windows注册表Regedit的方法小结
2017/08/18 Javascript
Javascript中prototype与__proto__的关系详解
2018/03/11 Javascript
js中getter和setter用法实例分析
2018/08/14 Javascript
vue实现打印功能的两种方法
2018/09/07 Javascript
vue Tab切换以及缓存页面处理的几种方式
2019/11/05 Javascript
JS操作JSON常用方法(10w阅读)
2020/12/06 Javascript
Python对列表中的各项进行关联详解
2017/08/15 Python
python爬虫_实现校园网自动重连脚本的教程
2018/04/22 Python
Django框架 查询Extra功能实现解析
2019/09/04 Python
SELENIUM自动化模拟键盘快捷键操作实现解析
2019/10/28 Python
Python如何通过Flask-Mail发送电子邮件
2020/01/29 Python
Python基于requests实现模拟上传文件
2020/04/21 Python
numpy 矩阵形状调整:拉伸、变成一位数组的实例
2020/06/18 Python
ASP.NET Core中的配置详解
2021/02/05 Python
Peter Millar官网:美国高档生活服饰品牌
2018/07/02 全球购物
BIFFI美国站:意大利BIFFI BOUTIQUES豪华多品牌时装零售公司
2020/02/11 全球购物
希特勒的演讲稿
2014/05/23 职场文书
党员教师自我剖析材料
2014/09/29 职场文书
三严三实心得体会范文
2014/10/13 职场文书
2016年七夕爱情寄语
2015/12/04 职场文书
CSS实现背景图片全屏铺满自适应的3种方式
2022/07/07 HTML / CSS