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插件
Sep 14 Javascript
Javascript根据指定下标或对象删除数组元素
Dec 21 Javascript
js解析与序列化json数据(二)序列化探讨
Feb 01 Javascript
js 控制图片大小核心讲解
Oct 09 Javascript
JS常见问题之为什么点击弹出的i总是最后一个
Jan 05 Javascript
jQuery组件easyui基本布局实现代码
Aug 25 Javascript
js获取元素的标签名实现方法
Oct 08 Javascript
JavaScript中英文字符长度统计方法示例【按照中文占2个字符】
Jan 17 Javascript
JavaScript计时器用法分析【setTimeout和clearTimeout】
Jan 18 Javascript
浅谈angular4生命周期钩子
Sep 05 Javascript
原生JavaScript实现Ajax异步请求
Nov 19 Javascript
Vuex 使用 v-model 配合 state的方法
Nov 13 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
十大催泪虐心动漫电影,有几部你还没看
2020/03/04 日漫
PHP获取windows登录用户名的方法
2014/06/24 PHP
php单文件版在线代码编辑器
2015/03/12 PHP
wamp服务器访问php非常缓慢的解决过程
2015/07/01 PHP
Ajax PHP JavaScript MySQL实现简易无刷新在线聊天室
2016/08/17 PHP
Smarty3配置及入门语法
2017/02/22 PHP
PHP实现的观察者模式实例
2017/06/21 PHP
JavaScript中Array 对象相关的几个方法
2006/12/22 Javascript
js 浮动层菜单收藏
2009/01/16 Javascript
javascript下对于事件、事件流、事件触发的顺序随便说说
2010/07/17 Javascript
基于jQuery和CSS3制作响应式水平时间轴附源码下载
2015/12/20 Javascript
iscroll碰到Select无法选择下拉刷新的解决办法
2016/05/21 Javascript
Javascript实现代码折叠功能
2016/08/25 Javascript
基于vue配置axios的方法步骤
2017/11/09 Javascript
Angular4学习教程之DOM属性绑定详解
2018/01/04 Javascript
深入浅析angular和vue还有jquery的区别
2018/08/13 jQuery
微信小程序中的canvas 文字断行和省略号显示功能的处理方法
2018/11/14 Javascript
微信小程序顶部导航栏可滑动并选中放大
2019/12/05 Javascript
react PropTypes校验传递的值操作示例
2020/04/28 Javascript
vue组件实现移动端九宫格转盘抽奖
2020/10/16 Javascript
JS中箭头函数与this的写法和理解
2021/01/14 Javascript
[01:08:09]DOTA2上海特级锦标赛主赛事日 - 1 胜者组第一轮#1Liquid VS Alliance第二局
2016/03/02 DOTA
Python实现简单多线程任务队列
2016/02/27 Python
Sanic框架蓝图用法实例分析
2018/07/17 Python
Win10+GPU版Pytorch1.1安装的安装步骤
2019/09/27 Python
pyinstaller打包单文件时--uac-admin选项不起作用怎么办
2020/04/15 Python
J2EE面试题集锦(附答案)
2013/08/16 面试题
优秀演讲稿范文
2013/12/29 职场文书
实习指导老师评语
2014/04/26 职场文书
2013年最新自荐信范文
2014/06/23 职场文书
2014年德育工作总结
2014/11/20 职场文书
2015小学教育教学工作总结
2015/07/21 职场文书
小学一年级数学教学反思
2016/02/16 职场文书
Nginx stream 配置代理(Nginx TCP/UDP 负载均衡)
2021/11/17 Servers
Mybatis是这样防止sql注入的
2021/12/06 Java/Android
golang用type-switch判断interface的实际存储类型
2022/04/14 Golang