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 面向对象编程 function也是类
Sep 17 Javascript
javascript showModalDialog 内跳转页面的问题
Nov 25 Javascript
使用jquery mobile做幻灯播放效果实现步骤
Jan 04 Javascript
通过JavaScript使Div居中并随网页大小改变而改变
Jun 24 Javascript
javascript 数字格式化输出的实现代码
Dec 10 Javascript
js鼠标悬浮出现遮罩层的方法
Jan 28 Javascript
jQuery的end()方法使用详解
Jul 15 Javascript
JavaScript中ES6字符串扩展方法
Aug 26 Javascript
有关vue 开发钉钉 H5 微应用 dd.ready() 不执行问题及快速解决方案
May 09 Javascript
vue-cli4使用全局less文件中的变量配置操作
Oct 21 Javascript
JavaScript严格模式不支持八进制的问题讲解
Nov 07 Javascript
JavaScript圣杯布局与双飞翼布局实现案例详解
Aug 05 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提取字符串中网站url地址的方法
2014/12/03 PHP
浅析Yii2 GridView 日期格式化并实现日期可搜索教程
2016/04/22 PHP
php获取ip及网址的简单方法(必看)
2017/04/01 PHP
php JWT在web端中的使用方法教程
2018/09/06 PHP
JS类中定义原型方法的两种实现的区别
2007/03/08 Javascript
JavaScript Event学习第十一章 按键的检测
2010/02/10 Javascript
Javascript(AJAX)解析XML的代码(兼容FIREFOX/IE)
2010/07/11 Javascript
Dom 是什么的详细说明
2010/10/25 Javascript
JavaScript的作用域和块级作用域概念理解
2014/09/21 Javascript
JavaScript操作Oracle数据库示例
2015/03/06 Javascript
javascript获取本机操作系统类型的方法
2015/08/13 Javascript
JS+CSS实现的蓝色table选项卡效果
2015/10/08 Javascript
js实现点击获取验证码倒计时效果
2021/01/28 Javascript
AngularJs 60分钟入门基础教程
2016/04/03 Javascript
JS修改地址栏参数实例代码
2016/06/14 Javascript
Jquery针对tr td的一些实用操作方法(必看篇)
2016/10/05 Javascript
深入学习nodejs中的async模块的使用方法
2017/07/12 NodeJs
vue.js引入外部CSS样式和外部JS文件的方法
2019/01/06 Javascript
python封装对象实现时间效果
2020/04/23 Python
python使用正则搜索字符串或文件中的浮点数代码实例
2014/07/11 Python
python单线程文件传输的实例(C/S)
2019/02/13 Python
python实现最小二乘法线性拟合
2019/07/19 Python
python实现的爬取电影下载链接功能示例
2019/08/26 Python
浅谈Python3实现两个矩形的交并比(IoU)
2020/01/18 Python
没编程基础可以学python吗
2020/06/17 Python
Python如何自动获取目标网站最新通知
2020/06/18 Python
英国屋顶用品和材料超市:Roofing Supplies UK
2019/08/24 全球购物
Myprotein荷兰官网:欧洲第一运动营养品牌
2020/07/11 全球购物
英语老师推荐信
2014/02/26 职场文书
农村面貌改造提升实施方案
2014/03/18 职场文书
村党支部公开承诺书
2014/05/29 职场文书
学习雷锋标语
2014/06/25 职场文书
优秀中职教师事迹材料
2014/08/26 职场文书
JavaScript分页组件使用方法详解
2021/07/26 Javascript
Python装饰器详细介绍
2022/03/25 Python
iOS 16进一步确认,一共支持16款iPhone
2022/04/28 数码科技