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中常用的55个经典技巧
Aug 12 Javascript
javascript中slice(),splice(),split(),substring(),substr()使用方法
Mar 13 Javascript
JavaScript制作windows经典扫雷小游戏
Mar 31 Javascript
JavaScript实现自动弹出窗口并自动关闭窗口的方法
Aug 06 Javascript
ui组件之input多选下拉实现方法(带有搜索功能)
Jul 14 Javascript
jQuery 特性操作详解及实例代码
Sep 29 Javascript
js 模仿锚点定位的实现方法
Nov 19 Javascript
jQuery插件ImgAreaSelect实现头像上传预览和裁剪功能实例讲解一
May 26 jQuery
jQuery图片缩放插件smartZoom使用实例详解
Aug 25 jQuery
云服务器部署Node.js项目的方法步骤(小白系列)
Mar 23 Javascript
ES6字符串的扩展实例
Dec 21 Javascript
通过滑动翻页效果实现和移动端click事件问题
Jan 26 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/11/25 PHP
php创建sprite
2014/02/11 PHP
laravel 验证错误信息到 blade模板的方法
2019/09/29 PHP
jquery Moblie入门—hello world的示例代码学习
2013/01/08 Javascript
jQuery 遍历- 关于closest() 的方法介绍以及与parents()的方法区别分析
2013/04/26 Javascript
JavaScript严格模式详解
2015/11/18 Javascript
AngularJs directive详解及示例代码
2016/09/01 Javascript
bootstrap3 dialog 更强大、更灵活的模态框
2017/04/20 Javascript
JavaScript实现换肤功能
2017/09/15 Javascript
基于Require.js使用方法(总结)
2017/10/26 Javascript
ES6知识点整理之模块化的应用详解
2019/04/15 Javascript
原生javascript实现类似vue的数据绑定功能示例【观察者模式】
2020/02/24 Javascript
vue打开子组件弹窗都刷新功能的实现
2020/09/21 Javascript
Node 使用express-http-proxy 做api网关的实现
2020/10/15 Javascript
jQuery实现增删改查
2020/12/22 jQuery
在Python中的Django框架中进行字符串翻译
2015/07/27 Python
Python 遍历列表里面序号和值的方法(三种)
2017/02/17 Python
老生常谈Python之装饰器、迭代器和生成器
2017/07/26 Python
用python写一个定时提醒程序的实现代码
2019/07/22 Python
Python代码使用 Pyftpdlib实现FTP服务器功能
2019/07/22 Python
通过实例解析Python调用json模块
2019/12/11 Python
使用Tensorflow实现可视化中间层和卷积层
2020/01/24 Python
Python截图并保存的具体实例
2021/01/14 Python
Sasa莎莎海外旗舰店:香港莎莎美妆平台
2018/03/21 全球购物
adidas爱尔兰官方网站:阿迪达斯运动鞋和运动服
2019/11/01 全球购物
Linden Leaves官网:新西兰纯净护肤品
2020/12/20 全球购物
超市优秀员工事迹材料
2014/05/01 职场文书
森林防火标语
2014/06/23 职场文书
2014年护理部工作总结
2014/11/14 职场文书
民事调解书范文
2015/05/20 职场文书
2015大学生暑期实习报告
2015/07/13 职场文书
《去年的树》教学反思
2016/02/18 职场文书
python如何进行基准测试
2021/04/26 Python
为了顺利买到演唱会的票用Python制作了自动抢票的脚本
2021/10/16 Python
Win11如何启用启动修复 ? Win11执行启动修复的三种方法
2022/04/08 数码科技
Java 死锁解决方案
2022/05/11 Java/Android