为什么js的document.write输出内容把网页内容全部覆盖掉了?

js中document.write输出内容后把body的内容全部替换了?能不能输出在它本身的位置而不干扰页面其它内容?肯定可以的,这是由于前端页面加载的问题!
 网友:为什么js的document.write 输出内容把网页内容全部冲刷掉了?

页面加载的时机不同导致!当执行click等鼠标事件的时候,这时候页面实际上已经加载完,如果此时document.write输出则会覆盖body内容;

如果在页面加载的过程中去执行document.write则不会“冲刷掉”。

demo:

  1. <p id="id01">久久经验网</p> 
  2. <script type="text/javascript"> 
  3. document.write('欢迎你加入!'); 
  4. document.getElementById('id01').onclick=function(){ 
  5.     document.write('我来自久久经验网!');    
  6. </script> 
  7. <p>网址:www.exp99.com</p> 
  8. <!-- 
  9. 1、页面加载完输出: 
  10. 久久经验网 
  11. 欢迎你加入! 
  12. 网址:www.exp99.com 
  13. 2、点击id=id01的p元素时,页面仅输出: 
  14. 我来自久久经验网! 
  15. --> 

我们会发现按页面的渲染先后顺序去document.write()则正常输出;如果点击某个页面元素去执行鼠标事件则body的内容会被document.write()里的文本替换!

 

相关经验

导读书签
书签初始化中…