document.write()

1、知识点

  • 1、如果document.write()在DOMContentLoaded或load事件的回调函数中,当文档加载完成,则会先清空文档(自动调用document.open()),再把参数写入body内容的开头

  • 2、在异步引入的js和DOMContentLoaded或load事件的回调函数中运行document.write(),
    运行完后,最好手动关闭文档写入(document.close())

  • 3、文档流是由浏览器创建,无权限手动关闭,document.close()函数只能够关闭由document.open()函数创建的文档流

  • 4 、 异步引用JavaScript时(例如test.js),test.js中必须先运行document.open()清空文档,然后才能运行document.write(),如果不先运行document.open(),直接运行document.write(),则无效且Chrome有如下提示:

    警告.png

  • 5、若在引用 test.js时,test.js中通过document.write()写入一段外部js(例如jquery),控制台会报下列警告

    block.png

    这是因为在document.write写入外部js(例如jquery)时,加载会需要时间,会发生阻塞作用。警告台会有警示。解决方案是需要通过document.write()写入的外部js(例如jquery)可以通过异步加载方式解决,即添加async或者defer document.write('<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" async ></script>')

  • 6、还有一个问题就是接着第五步,你在test.js中通过document.write('<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" ></script>')成功的加载了jquery,但是在下面使用时,会发现$ 未定义,这又是什么原因呢?其实还是上边的问题,就是加载需要时间,你在使用的时候,jquery还未加载完成,所以就出现了这个$未定义的情况。那怎么解决呢?很简单,用一个定时器延迟执行

2、解释

  • 1、window.onload或者DOMContentLoaded事件是在文档内容完全加载完毕再去执行事件处理函数,当然文档流已经关闭了,这个时候执行doucment.writ()函数会自动调用document.open()函数创建一个新的文档流,并写入新的内容,再通过浏览器展现,这样就会覆盖原来的内容
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容