原生JavaScript的API里document.write相对是重量级的。假如人人对他的运用场景、注意事项、道理等不明了,迎接浏览本文。
运用场景
第三方协作
<div id="third"> <!--假如是A协作方须要插进去iframe--> iframe <!--假如是B协作方须要插进去ul--> ul[列表内容] </div>
假如这段代码放在前端处置惩罚,不运用后端模板,用document.write能够轻松完成,固然完成的体式格局很多种,这里只是申明document.write能够胜任。
<div id="third"> <script> if(A){ document.write('iframe') } if(B){ document.write('ul') } </script> </div>
广告
平常广告代码中都是运用document.write来加载第三方广告,比方百度同盟的广告。一般都是如许用。
<div id="ad"> <!--corp.js会运用document.write将广告输出到这个位置--> <script src="http://baidu.com/corp.js"> </div>
注意事项
假如看完了运用场所是否是以为相识document.write了呢?其实不然,document.write的引入机遇很主要。
照样看上述场景的案例,假如第一个不是内联的script,而是在js文件里写的呢?在js文件里的写法有2种,一种是DOMContentLoaded或onload以后运用write,好不疑问页面被清空了,另一种则是直接实行的write,详细write的内容在页面处于什么位置要取决于这个js引入的位置。
第二个案例,假如js是异步引入的(加async或许动态到场的),内里的document.write因平安原因是没法事情的。
Failed to execute ‘write’ on ‘Document’: It isn’t possible to write into a document from an asynchronously-loaded external script unless it is explicitly opened.
事情道理
在弄清楚write的道理之前我们先看几种写法。
head中
<head> <meta charset="UTF-8"> <script type="text/javascript"> document.write('<p>test</p>') </script> </head> <!--叨教上述代码在HTML中的什么位置?-->
body中
<div id="test"> <script type="text/javascript"> <!-- 直接写 --> document.write('hello world'); <!-- 子节点 --> var s=document.createElement('script'); s.text='document.write("c")' document.getElementById('test').appendChild(s) </script> </div> <!-- 叨教这两种写法的效果离别是什么?有区分吗? -->
同步js
<script src="http://cucygh.github.io/post.js" charset="utf-8"></script> <!-- 剧本中有write操纵,输出的内容在什么位置?-->
异步js
<script src="http://cucygh.github.io/post.js" async charset="utf-8"></script> <!-- 剧本中有write操纵,是否能一般输出,假如不能,有什么好的要领?-->
接下来我们看下document.write的事情道理。
页面在loading状况,根据自上而下的递次顺次剖析script,假如碰到write直接输出,所以放在head的write都是在body顶部展现的。
页面在loaded状况,纵然没有挪用document.open,document.write操纵也会自动挪用document.open要领从而将页面清空了。有的同学说将document.open=function(){}是否是能够防止,结论是No。
Note: as document.write writes to the document stream, calling document.write on a closed (loaded) document automatically calls document.open, which will clear the document.
所以运用document.write肯定要知道实行的机遇。
疑问
假如在一个指定位置异步加载多家的广告代码,怎样完成呢?想知道答案下回分解。