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 相关文章推荐
尽可能写&quot;友好&quot;的&quot;Javascript&quot;代码
Jan 09 Javascript
仿校内登陆框,精美,给那些很厉害但是没有设计天才的程序员
Nov 24 Javascript
js下将阿拉伯数字每三位一逗号分隔(如:15000000转化为15,000,000)
Jun 02 Javascript
jQuery实现列表自动滚动循环滚动展示新闻
Aug 22 Javascript
JavaScript中用getDate()方法返回指定日期的教程
Jun 09 Javascript
Bootstrap表单布局
Jul 19 Javascript
Google 地图API资料整理及详细介绍
Aug 06 Javascript
JS继承之借用构造函数继承和组合继承
Sep 07 Javascript
jQuery Easy UI中根据第一个下拉框选中的值设置第二个下拉框是否可以编辑
Nov 29 Javascript
JavaScript解析JSON格式数据的方法示例
Jan 24 Javascript
Three.js基础学习之场景对象
Sep 27 Javascript
Javascript中绑定click事件的四种方式介绍
Oct 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
「OVERLORD」动画重要删减!雅儿贝德的背叛?至尊猎杀队结成
2020/04/09 日漫
提问的智慧
2006/10/09 PHP
PHP下通过exec获得计算机的唯一标识[CPU,网卡 MAC地址]
2011/06/09 PHP
使两个iframe的高度与内容自适应,且相等
2006/11/20 Javascript
解决 firefox 不支持 document.all的方法
2007/03/12 Javascript
用javascript实现兼容IE7的类库 IE7_0_9.zip提供下载
2007/08/08 Javascript
JQuery AJAX提交中文乱码的解决方案
2010/07/02 Javascript
容易被忽略的JS脚本特性
2011/09/13 Javascript
Javascript小技巧之生成html元素
2014/05/15 Javascript
jquery处理json数据实例分析
2014/06/03 Javascript
简单实现轮播图效果的实例
2016/07/15 Javascript
jQuery弹出下拉列表插件(实现kindeditor的@功能)
2016/08/16 Javascript
Vue + Webpack + Vue-loader学习教程之相关配置篇
2017/03/14 Javascript
js用类封装pop弹窗组件
2017/10/08 Javascript
javascript实现电脑和手机版样式切换
2017/11/10 Javascript
浅谈React之状态(State)
2018/09/19 Javascript
js实现网页同时进行多个倒计时功能
2019/02/25 Javascript
JavaScrip数组去重操作实例小结
2019/06/20 Javascript
echarts 使用formatter 修改鼠标悬浮事件信息操作
2020/07/20 Javascript
vue实现简单全选和反选功能
2020/09/15 Javascript
python+VTK环境搭建及第一个简单程序代码
2017/12/13 Python
python xlwt如何设置单元格的自定义背景颜色
2019/09/03 Python
python 模拟创建seafile 目录操作示例
2019/09/26 Python
Python 解决OPEN读文件报错 ,路径以及r的问题
2019/12/19 Python
python lambda函数及三个常用的高阶函数
2020/02/05 Python
Vero Moda西班牙官方购物网站:丹麦BESTSELLER旗下知名女装品牌
2018/04/27 全球购物
北京银河万佳Java面试题
2012/03/21 面试题
浪漫婚礼主持词
2014/03/14 职场文书
小班评语大全
2014/05/04 职场文书
测绘工程专业求职信
2014/07/15 职场文书
2014年教师节红领巾广播稿
2014/09/10 职场文书
初中学生操行评语
2014/12/26 职场文书
《蚂蚁和蝈蝈》教学反思
2016/02/22 职场文书
股东合作协议书模板2篇
2019/11/05 职场文书
MySQL命令无法输入中文问题的解决方式
2021/08/30 MySQL
PostgreSQL13基于流复制搭建后备服务器的方法
2022/01/18 PostgreSQL