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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。