document.readyState等属性，判断页面是否加载完

时间 2019-11-30

标签 document.readystate document readystate 属性判断页面是否加载繁體版

原文原文链接

如何在页面加载完成后再去作某事？什么方法能够判断当前页面加载已完成？document.readyState 判断页面是否加载完成？
javascript提供了document.readyState=="complete"方法来解决当前页面加载判断的问题。

<script type="text/javascript">
   function initView(){

      if (document.readyState=="complete")
   {
      //此处能够填充具体的处理方法
      alert("The page is already Load!");
   }
   }
</script>
<html>
<head></head>
   <body onload="initView();">
     
   </bodu>
</html>

===================================================================================
方法一：


function waitThenDoIt(){
  try{
    if (window.document.readyState){//IE
      if (window.document.readyState==’complete’){
        doIt();
      }else
        setTimeout("waitThenDoIt()",10);
    } else {//Firefox
        window.addEventListener("load",function(){doIt();},false);
    }
  } catch (ex) {
  }
}
function doIt(){
  //…
}

将代码中的：
window.addEventListener("load",function(){doIt();},false);
替换为：
window.addEventListener("DOMContentLoaded",function(){doIt();},false);
也能够。

方法二：

作页面时常常会遇到当前页面加载完成后，执行某些初始化工做。这时候就要知道如何判断页面（包括IFRAME）已经加载完成，代码以下：

<script language="javascript">
      document.onreadystatechange = statechange;
      function statechange() {
        if(document.readystate == 'complete') {
           for(i=0; i<window.frames[].length; i++) {
              window.frames[i].document.onreadystatechange = statechange;
              if(window.frames[i].document.readystate != 'complete') {
                 statechange();
                 return;
              }
            }
         }
      }
    </script>

此方法能够写在公用js中，其余方法调用判断便可

方法三：

window..onload的是页面加载完成后执行的事件，并且winodw.onload不能屡次执行，jquery的$(fn)解决了这个问题，可是不使用jquery的状况下呢?如下是老外写的解决办法
Js代码复制代码



    addDOMLoadEvent = (function(){
        // create event function stack
        var load_events = [],
            load_timer,
            script,
            done,
            exec,
            old_onload,
            init = function () {
                done = true;

                // kill the timer
                clearInterval(load_timer);

                // execute each function in the stack in the order they were added
                while (exec = load_events.shift())
                    exec();

                if (script) script.onreadystatechange = '';
            };

        return function (func) {
            // if the init function was already ran, just run this function now and stop
            if (done) return func();

            if (!load_events[0]) {
                // for Mozilla/Opera9
                if (document.addEventListener)
                    document.addEventListener("DOMContentLoaded", init, false);

                // for Internet Explorer



                // for Safari
                if (/WebKit/i.test(navigator.userAgent)) { // sniff
                    load_timer = setInterval(function() {
                        if (/loaded|complete/.test(document.readyState))
                            init(); // call the onload handler
                    }, 10);
                }

                // for other browsers set the window.onload, but also execute the old window.onload
                old_onload = window.onload;
                window.onload = function() {
                    init();
                    if (old_onload) old_onload();
                };
            }

            load_events.push(func);
        }
    })();

document.readyState:判断文档是否加载完成。firefox不支持。

这个属性是只读的，传回值有如下的可能：javascript

0-UNINITIALIZED：XML 对象被产生，但没有任何文件被加载。
1-LOADING：加载程序进行中，但文件还没有开始解析。
2-LOADED：部分的文件已经加载且进行解析，但对象模型还没有生效。
3-INTERACTIVE：仅对已加载的部分文件有效，在此状况下，对象模型是有效但只读的。
4-COMPLETED：文件已彻底加载，表明加载成功。css

document.onreadystatechange = subSomething;//当页面加载状态改变的时候执行这个方法.
function subSomething()
{
if(document.readyState == "complete"){ //当页面加载状态为彻底结束时进入
//你要作的操做。
} html

else if(document.readyState=="loading"){java

}jquery

}数组

比较好的例子：http://www.jb51.net/article/20445.htmui

说明：onreadystatechange 事件能辨识readyState 属性的改变。

document.all(只被IE支持)this

action：document.layers是Netscape 4.x专有的属性，是一个表明全部由储如<div><layer>等定位了的元素的数组一般也是用<div> 或<layer>对象的id属性来引用的，可是这里面不包含除此之外的其它元素spa

document.layers和document.all的用法是同样的，功能也是相同的。所在我就只介绍一种用法:
document.all的意思是文档的全部元素，也就是说它包含了当前网页的全部元素。它是以数组的形式保存元素的属性的，因此咱们能够用 document.all["元素名"].属性名="属性值"来动态改变元素的属性。用这条语句，能够作出许许多多动态网页效果，如：动态变换图片、动态改变文本的背景、动态改变网页的背景、动态改变图片的大小、动态改变文字的大小各颜色等等。你简直能够动态控制全部网页元素。
document.all[]这个数组能够访问文档中全部元素。

例1（这个可让你理解文档中哪些是对象）

<!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>
<title>Document.All Example</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
</head>
<body>
<h1>Example Heading</h1>
<hr />
<p>This is a <em>paragraph</em>. It is only a <em>paragraph.</em></p>
<p>Yet another <em>paragraph.</em></p>
<p>This final <em>paragraph</em> has <em id="special">special emphasis.</em></p>
<hr />
<script type="text/javascript">

</script>
</body>
</html>
　它的执行结果是:
Example Heading

--------------------------------------------------------------------------------

This is a paragraph. It is only a paragraph.
Yet another paragraph.
This final paragraph has special emphasis.

--------------------------------------------------------------------------------

document.all.length=18
document.all[0]=!
document.all[1]=HTML
document.all[2]=HEAD
document.all[3]=TITLE
document.all[4]=META
document.all[5]=BODY
document.all[6]=H1
document.all[7]=HR
document.all[8]=P
document.all[9]=EM
document.all[10]=EM
document.all[11]=P
document.all[12]=EM
document.all[13]=P
document.all[14]=EM
document.all[15]=EM
document.all[16]=HR
document.all[17]=SCRIPT
(注意它只能够在IE上运行) .net

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>单击DIV变色</title>
<style type="text/css">

</style>
</head>
<body><div id="docid" name="docname" onClick="bgcolor()"></div>
</body>
</html>
<script language="javascript" type="text/javascript">

</script>
上面的这个例子让你了解怎么访问文档中的一个特定元素，好比文档中有一个DIV
<div id="docid" name="docname"></div>，你能够经过这个DIV的ID，NAME 或INDEX属性访问这个DIV：
document.all["docid"]
document.all["docname"]
document.all.item("docid")
document.all.item("docname")
document.all[7]
document.all.tags("div")则返回文档中全部DIV数组，本例中只有一个DIV，因此用 document.all.tags("div")[0]就能够访问了。
　　三、使用document.all[]
例3
<!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><title>Document.All Example #2</title><meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" /></head><body><h1 id="heading1" align="center" style="font-size: larger;">DHTML Fun!!!</h1><form name="testform" id="testform" action="#" method="get"><br /><br /><input type="button" value="Align Left" onclick="document.all['heading1'].align='left';" />//改变<h1& gt;</h1>标签对中的align属性的值,下面的代码做用相同<input type="button" value="Align Center"onclick="document.all['heading1'].align='center';" /><input type="button" value="Align Right"onclick="document.all['heading1'].align='right';" /><br /><br /><input type="button" value="Bigger"onclick="document.all['heading1'].style.fontSize='xx-large';" /><input type="button" value="Smaller"onclick="document.all['heading1'].style.fontSize='xx-small';" /><br /><br /><input type="button" value="Red"onclick="document.all['heading1'].style.color='red';" /><input type="button" value="Blue"onclick="document.all['heading1'].style.color='blue';" /><input type="button" value="Black"onclick="document.all['heading1'].style.color='black';" /><br /><br /><input type="text" name="userText" id="userText" size="30" /><input type="button" value="Change Text"onclick="document.all['heading1'].innerText=document.testform.userText.value;" /& gt;//改变<h1></h1>标签对中的文本内容</form></body></html>