如何在页面加载完成后再去做某事？什么方法可以判断当前页面加载已完成？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不支持。

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

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

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

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

}

}

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

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

document.all(只被IE支持)

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

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">
<!--
var i,origLength;
origLength = document.all.length;
document.write('document.all.length='+origLength+"<br />");
for (i = 0; i < origLength; i++)
{
document.write("document.all["+i+"]="+document.all[i].tagName+"<br />");
}
//-->
</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上运行)

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>单击DIV变色</title>
<style type="text/css">
<!--
#docid{
height:400px;
width:400px;
}
-->
</style>
</head>
<body><div id="docid" name="docname" onClick="bgcolor()"></div>
</body>
</html>
<script language="javascript" type="text/javascript">
<!--
function bgcolor(){
document.all[7].style.backgroundColor="#000"
}
-->
</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]就可以访问了。
　　3、使用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>
<!-- Works in Internet Explorer and compatible -->
<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>

document.readyState等属性，判断页面是否加载完的更多相关文章

  1. CefSharp如何判断页面是否加载完

    问题:CefSharp如何判断页面是否加载完毕. 摘要:相信C#用CefSharp做浏览器来发的应该有很多人都会有遇到这个问题.特别是要执行JavaScript的时候,涉及到跨页面的JavaScrip ...

  2. JS判断页面是否加载完成

    用 document.readyState == "complete" 判断页面是否加载完成 传回XML 文件资料的目前状况. 基本语法intState ＝ xmlDocument ...

  3. JavaScript——判断页面是否加载完成

    前言 接上文,既然你是做一个loading的效果,你总不能一直loading,当页面完成加载的时候你总要结束吧 步骤 先说下原生的方法,再讲jquery的方法,原理是一样的 JavaScript // ...

  4. 在页面未加载完之前显示loading动画

    在页面未加载完之前显示loading动画 这里有很多比这篇博客还优秀的loading动画源码 我还参考这篇博客 loading动画代码demo 我的demo预览 <!DOCTYPE html&g ...

  5. 使用selenium操作ant design前端的页面，感觉页面没加载完

    因需要收集页面数据,遂准备使用selenium爬取瓦斯阅读页面, 瓦斯网站使用的是ant design,元素定位非常困难,页面元素都没有ID,现在还只是能做到操作登录,不能自动打开订阅,查询某公众号, ...

  6. 在iframe内页面完全加载完后，关闭父页面生成的div遮罩层

    遮罩层div为iframe父页面生成,需在iframe内页面完全加载完后,关闭遮罩层 alertMsgClose() :函数为关闭遮罩层函数 此段代码在iframe页面内: <script> ...

  7. 用js判断页面是否加载完成

    这可以通过用document.onreadystatechange的方法来监听状态改变, 然后用document.readyState == “complete”判断是否加载完成. 可以采用2个div ...

  8. jquery的 $(function(){ }) = $(document).ready(function(){ }) ，及页面的加载顺序

    document.ready和onload的区别:一.JavaScript文档加载完成事件页面加载完成有两种事件一是ready,表示文档结构已经加载完成(不包含图片等非文字媒体文件) 二.是onloa ...

  9. 页面框架加载完自动执行函数$(function(){});

    页面中有一些大的资源文件,如图片,声音等,如果一个事件绑定写在这些加载资源代码的下方,那么要等资源加载完才会绑定,这样体验不够好. 于是想不等资源加载完,只要框架加载完成就绑定事件,就可以把代码放在以 ...

随机推荐

  1. POJ 2431 Expedition （贪心 + 优先队列）

    题目链接:http://poj.org/problem?id=2431 题意:一辆卡车要行驶L单位距离,卡车上有P单位的汽油.一共有N个加油站,分别给出加油站距终点距离,及加油站可以加的油量.问卡车能 ...

  2. 20165301陈潭飞2017-2018-2 20165301 实验三《Java面向对象程序设计》实验报告

    2017-2018-2 20165301 实验三<Java面向对象程序设计>实验报告 一.敏捷开发与XP实践-1 实验要求: 在IDEA中使用工具(Code->Reformate C ...

  3. radis相关操作

    redis是一个key-value存储系统.和Memcached类似,它支持存储的value类型相对更多,包括string(字符串).list(链表).set(集合).zset(sorted set ...

  4. nhibernate 比较运算符

    比较运算符 HQL运算符 QBC运算符 含义 = Restrictions.eq() 等于 <> Restrictions.not(Exprission.eq()) 不等于 > Re ...

  5. Python编程举例-自定义日期格式

    #自定义格式 x = '{0}{0}{0}'.format('dog') print(x) class Date: def __init__(self,year, mon,day): self.yea ...

  6. Python导入模块-Import

    #1语法importimport module1,module2,module3,module4 #2from xx import xx 语句from module import name1,name ...

  7. openwrt 控制gpio口的方法

    利用i2c来控制gpio口 1.编译驱动或者安装驱动 # opkg update # opkg install kmod-i2c-gpio-custom kmod-i2c-core# 加载驱动 # i ...

  8. COMP COMP-3

    Comp (Computational) Comp (with no suffix) leaves the choice of the data type to the compiler writer ...

  9. 20162327WJH《程序设计与数据结构》课程总结

    20162327<程序设计与数据结构>课程总结 一.每周作业链接汇总 预备作业1:第一篇博客主要谈论了对本学期学习的展望,树立了一个目标. 预备作业2:简单的谈了谈自己的优势和一些成功的案 ...

  10. hdu 3586 树形dp+二分

    题目大意:给定n个敌方据点,1为司令部,其他点各有一条边相连构成一棵 树,每条边都有一个权值cost表示破坏这条边的费用,叶子节点为前线.现要切断前线和司令部的联系,每次切断边的费用不能超过上限lim ...