如何在页面加载完成后再去做某事？什么方法可以判断当前页面加载已完成？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. sklearn逻辑回归(Logistic Regression)类库总结

    class sklearn.linear_model.LogisticRegression(penalty=’l2’, dual=False, tol=0.0001, C=1.0, fit_inter ...

  2. Maven核心概念

    一.坐标 在平面几何中,坐标(x,y)可以标识平面中唯一的一个点.在maven中,坐标是为了定位一个唯一确定的jar包.Maven世界拥有大量构建,我们需要找一个用来唯一标识一个构建的统一规范:拥有了 ...

  3. DB2:FETCH FIRST 1 ROWS ONLY

    DB2:FETCH FIRST ROWS ONLY,在Oracle中使用where rownum=1代替 DB2: SELECT INSTORAGENO FROM ( SELECT max(AUDIT ...

  4. SG函数(转自百度百科)

    给定一个有向无环图和一个起始顶点上的一枚棋子,两名选手交替的将这枚棋子沿有向边进行移动,无法移 动者判负.事实上,这个游戏可以认为是所有Impartial Combinatorial Games的抽象 ...

  5. 洛谷 P2241统计方形（数据加强版） 题解

    题目传送门 说是加强版,其实可以把棋盘那道题的代码粘过来(注意要开long long): #include<bits/stdc++.h> using namespace std; ,c; ...

  6. 1-4 TCP/IP协议族

    网络协议是在内核中实现的,socket是对tcp/ip协议的系统调用,提供以下两点功能: 1. 将应用撑血数据从用户缓冲区中复制到TCP/UDP内核发送缓冲区,以交付内核发送来的数据(比如send), ...

  7. vuejs学习——vue+vuex+vue-router项目搭建(一)

    前言 快年底了却有新公司邀请了我,所以打算把上家公司的学到一下技术做一些总结和分享. 现在vuejs都2.0了,我相信也有很多朋友和我一样实际项目还是选择vue1.0的或者给新手一些参考,不管在选择哪 ...

  8. HTML canvas fillText()与measureText()方法

    HTML5 canvas fillText() 方法 实例 使用 fillText(),在画布上写文本 "你好!word!" 和 "我是w3c": JavaSc ...

  9. Loadrunner报错“Too many local variablesAction.c”解决方法

    问题描述,在Action.c里定义数组时如果数组长度过长,如char a[1024*1024]运行时即会报错: 意思为:太多的局部变量 问题原因及解决方法如下: 1. VuGen对于局部变量可以分配的 ...

  10. 几类javascript常用的创建对象方法

    JavaScript的一个重要功能就是面向对象的功能,通过基于对象的程序设计,可以用更直观.模块化和可重复使用的方式进行程序开发. 一组包含数据的属性和对属性中包含数据进行操作的方法,称为对象.比如要 ...