关于doucument.write与window.onload

本帖最后由 arrowwhite 于 2011-05-24 18:15:28 编辑

解决方案 »

  1.   

    你知道window.onload的含义吗？它是指：代码中的DOM已经加载就绪了，也就是文档流已经关闭。此时，你再用document.write()是启用了新的文档流来render浏览器窗口内容，从而把前面的全部内容通通覆盖掉（就是你说的“<p>html标签</p>会无法加载”--不是无法加载，是被你document.write()覆盖了）。
      

  2.   

    你用firebug查看下html结构就知道了 第一个问题 你页面载入以后执行 document.write()方法   把整张html给清空了记住 最好不要在 function中用 document.write() 如果非要使用 可以用 obj.innerHTML代替,
      应该在页面上下文加载的时候  直接使用 document.write()
      

  3.   

    问二楼  那为什么window.onload=pri()就可以显示<p>html标签</p>？
    window.onload=pri()与window.onload=pri   语句解释有什么不同
    问三楼  那关于假如在function 中使用document.write()，为什么使用window.onload=pri时，通过id获得不了外联的css样式，必须要通过style定义
      

  4.   

    window.onload=pri()与window.onload=pri 语句解释有什么不同
    window.onload=pri()
    window.onload=pri（）是一个运算符 当他在 function对象后面时 表示 执行该function有（） 则返回该函数运行后的值  没有（） 则直接表示该函数
    window.onload=XXX表示 window对象的 onload的时候 执行 XXX（）一般浏览器在页面所有元素加载完毕后 调用 onload 事件
      

  5.   

    所以总结一下，window.onload后执行执行document.write(),他就等于把页面中的内容清空了，包括<head>
    <body>中的内容，所以此时我通过id拿不到外联的<head>中的css样式对不对？
    我这么理解对不对？
    那为什么，window.onload=pri()内的document.write()不会清空html页面？？？？
      

  6.   

    document.write只有在加载时执行才不会清空页面内容，其他时间执行则会清空页面内容。？？
      

  7.   

    对的,必须要在document加载完成之前
      

  8.   

    你8楼的总结还是标，不是本。你对DOM以及BOM的概念还很模糊
    -------------------------------------------------------------------
    1、document.write()是一个向窗口写入内容的文件流，这个相信你已经明白。关键是下面；
    2、window.onload  :
       window: 浏览器的窗体对象。就是你用浏览器打开一个空白网页的时候，那白花花一片的窗口；
       onload:它是一个事件，意指一些DOM元素（不是全部）的加载完成事件。例如window,iframe,image等。3、事件是要绑定以后才会起作用的。可以在JS代码中绑定，也可以直接在控件元素里绑定；但是写法不同，你恰恰就模糊在这个地方，如：
    1）
    <script>
    function pri(){
    document.write("<div id='apDiv1' style='position:absolute;width:200px;height:115px;z-index:2;left: 538px;top: 56px;' >"+"dsf"+"</div>")
    }
    window.onload=function(){
      pri();
    }
    </script>
    -------------
    2）
    <script>
    function pri(){
    document.write("<div id='apDiv1' style='position:absolute;width:200px;height:115px;z-index:2;left: 538px;top: 56px;' >"+"dsf"+"</div>")
    }</script>
    <body onload="pri()">
    ...............
    </body>
    这两种方式绑定之后，才能有页面全部内容加载完成后触发事件的可能。否则会报错而不执行你的函数。如：
    <script>
    function pri(){
    document.write("<div id='apDiv1' style='position:absolute;width:200px;height:115px;z-index:2;left: 538px;top: 56px;' >"+"dsf"+"</div>")
    }
    window.onload=pri()//报错
    }
      

  9.   

    更正一下：9楼一部分内容不确切：
    这两种方式绑定之后，才能有页面全部内容加载完成后触发事件的可能。否则会报错而不执行你的函数。如：
    <script>
    function pri(){
    document.write("<div id='apDiv1' style='position:absolute;width:200px;height:115px;z-index:2;left: 538px;top: 56px;' >"+"dsf"+"</div>")
    }
    window.onload=pri()//报错
    }
    -------------------------------
    应该是：
    这样绑定onload事件是错误的，它并不是等到页面加载完毕后才触发，而仅仅起到在文档加载中调用一个普通的函数pri()那样的作用，所以页面并未被清除，而仅仅是添加内容或修正内容。但是还是会报错。例：
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>onload与document.write</title>
    <style type="text/css">
    #apDiv1 {
    position:absolute;
    width:200px;
    height:115px;
    z-index:2;
    left: 538px;
    top: 56px;
    border: 10px solid #F00;/*此样式定义了边框*/
    }
    </style>
    </head><body>
    <div id="apDiv1"></div>
    <p>
      <img src='http://avatar.profile.csdn.net/6/F/F/2_arrowwhite.jpg' onload="alert('image loaded')">
    </p>
    <script type="text/javascript">
    function pri(){
      document.write("<div id='apDiv1' style='position:absolute;border:1px dashed blue' >yyyyyyyyyyyy</div>")
    }try{  window.onload=pri() }
    catch(e){alert(e.message)}
    //使用下面的方法，就会清空页面，重新写入：
    //window.onload=function(){alert('window loaded! ');pri();}
    </script>
    </body>
    </html>
      

  10.   

    write 方法用于向文档流中写入内容。当文档在加载的时候，文档流是可写的，所以就不用调用open(),close()方法来打开和关闭输出流。当文档加载完毕过后，文档流是不可写的，要write内容就得先打开输出流，通过调用open()打开，这个open()方法则会清除当前文档（通常open()方法会在调用write时自动调用）。所以第一个问题：不是<p>html标签</p>无法加载，是清除了；同样的样式也清除了，当然你也得不head里的样式。第二个问题:文档从上而上加载渲染，当遇到window.onload=pri(),此时前面的样式、<p>..</p>等都分析完成。这时就要解析这句话window.onload=pri()。要往window.onload事件上绑定一个函数，而=号的右边又不是一个函数而是一个函数的返回值。所以就得先执行这个数据，得到返回值，再绑定给window.onload。执行pri()，把write里的东西写到文档里，由于这时文档还是处于加载渲染的阶段，所以不会清除当前文档，而是加文档里加入内容，你加入的div和原来body里的div叠在一起了。这时pri()执行完了，而window.onload还期待pri()返回一个绑定函数，pri()没有明确的返回语句也就默认返回undefined，而undefined和window.onload的绑定类型不对，所以会报错。 至于你的样式，你用write写的div会用自己的style里的样式和#apDiv1里的样式一起计算，得到最后的样式。你两个div最后计算出来的样式都一样，所你看不出来差异（你可以试着把style里的width减小就会看出来）。style属性只能取得内联里的样式结果，要得到<style></style>里的和外部样式（准确的说是计算样式），得用另外的东西currentStyel、getComputedStyle。至于为什么，东西太多这里就不说了