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 读取xml,写入xml 实现代码
Jul 10 Javascript
判断JS对象是否拥有某种属性的两种方式
Dec 02 Javascript
javascript中定义私有方法说明(private method)
Jan 27 Javascript
深入理解JavaScript系列(33):设计模式之策略模式详解
Mar 03 Javascript
jQuery计算文本框字数及限制文本框字数的方法
Mar 01 Javascript
jQuery短信验证倒计时功能实现方法详解
May 25 Javascript
基于Marquee.js插件实现的跑马灯效果示例
Jan 25 Javascript
关于angularJs清除浏览器缓存的方法
Nov 28 Javascript
解决微信小程序防止无法回到主页的问题
Sep 28 Javascript
JS实现深度优先搜索求解两点间最短路径
Jan 17 Javascript
Node使用Selenium进行前端自动化操作的代码实现
Oct 10 Javascript
vue组件中实现嵌套子组件案例
Aug 31 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
Apache2 httpd.conf 中文版
2006/12/06 PHP
php实现信用卡校验位算法THE LUHN MOD-10示例
2014/05/07 PHP
PHP中读取照片exif信息的方法
2014/08/20 PHP
PHP判断手机是IOS还是Android
2015/12/09 PHP
PHP简单实现无限级分类的方法
2016/05/13 PHP
ThinkPHP类似AOP思想的参数验证的实现方法
2019/12/18 PHP
利用404错误页面实现UrlRewrite的实现代码
2008/08/20 Javascript
jcarousellite.js 基于Jquery的图片无缝滚动插件
2010/12/30 Javascript
JavaScript的递归之递归与循环示例介绍
2013/08/05 Javascript
原生JavaScript+LESS实现瀑布流
2014/12/12 Javascript
node.js中的fs.readdirSync方法使用说明
2014/12/17 Javascript
js面向对象之常见创建对象的几种方式(工厂模式、构造函数模式、原型模式)
2015/11/09 Javascript
jQuery Dialog对话框事件用法实例分析
2016/05/10 Javascript
Servlet实现文件上传,可多文件上传示例
2016/12/05 Javascript
慕课网题目之js实现抽奖系统功能
2017/09/19 Javascript
angular第三方包开发整理(小结)
2018/04/19 Javascript
快速解决angularJS中用post方法时后台拿不到值的问题
2018/08/14 Javascript
详解Ant Design of React的安装和使用方法
2018/12/27 Javascript
小程序获取当前位置加搜索附近热门小区及商区的方法
2019/04/08 Javascript
vue 项目 iOS WKWebView 加载
2019/04/17 Javascript
基于JavaScript判断两个对象内容是否相等
2020/01/10 Javascript
Javascript操作select控件代码实例
2020/02/14 Javascript
[01:22:10]Ti4 循环赛第二日 DK vs Empire
2014/07/11 DOTA
Python随机生成数模块random使用实例
2015/04/13 Python
python3写的简单本地文件上传服务器实例
2018/06/04 Python
Pycharm 2020最新永久激活码(附最新激活码和插件)
2020/09/17 Python
双向RNN:bidirectional_dynamic_rnn()函数的使用详解
2020/01/20 Python
Python classmethod装饰器原理及用法解析
2020/10/17 Python
在Python中字典按值排序的实现方法
2020/11/12 Python
Canvas高级路径操作之拖拽对象的实现
2019/08/05 HTML / CSS
奥兰多迪士尼门票折扣:Undercover Tourist
2018/07/09 全球购物
人力资源管理专业应届生求职信
2013/09/28 职场文书
公司清洁工岗位职责
2013/12/14 职场文书
经济管理自荐书
2014/06/09 职场文书
离婚协议书范文2015
2015/01/26 职场文书
Python中的np.argmin()和np.argmax()函数用法
2021/06/02 Python