如何在页面加载完成后再去做某事？什么方法可以判断当前页面加载已完成？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. html基础--css基本属性

    HTML基础--css基本属性     <!DOCTYPE html> <html lang="en"> <head> <meta cha ...

  2. POJ 1218 THE DRUNK JAILER（类开灯问题，完全平方数）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2188 题目大意:n为5-100之间的一个数,代表有多少间牢房,刚开始所有房间打开,第一轮2的倍数的房间 ...

  3. html学习-DOM操作

    1.dom介绍 文档对象模型(Document Object Model,DOM)是一种用于HTML和XML文档的编程接口.它给文档提供了一种结构化的表示方法,可以改变文档的内容和呈现方式.我们最为关 ...

  4. 关于IPMI的几个问题

    https://blog.csdn.net/lanyang123456/article/details/51712878

  5. Ntp时间服务器与定时任务Crontab

    一 NTP时间服务器 1 局域网内的NTP同步配置 注意 所有配置操作必须是root用户 ,局域网内node21作为NTP Server,node22,node23作为NTP Client与服务器进行 ...

  6. 语言模型srilm基本用法

    目录: 一基本训练 二语言模型打分 三语言模型剪枝 四语言模型合并 五语言模型使用词典限制 一.基本训练 #功能 读取分词后的text文件或者count文件,然后用来输出最后汇总的count文件或者语 ...

  7. 搭建 GIT 服务器

    Git 是一款免费.开源的分布式版本控制系统,用于敏捷高效地处理任何或小或大的项目. 此实验以 CentOS 7.2 x64 的系统为环境,搭建 git 服务器. 安装依赖库和编译工具 为了后续安装能 ...

  8. poj1040 Transportation（DFS）

    题目链接 http://poj.org/problem?id=1040 题意 城市A,B之间有m+1个火车站,第一站A站的编号为0,最后一站B站的编号为m,火车最多可以乘坐n人.火车票的票价为票上终点 ...

  9. javascript右下角弹层及自动隐藏

    在编写项目中总会需要有个右下角弹层提示公告的需求,怎么用更简单方面,更简洁代码,实现更好用户体验这个就是我们的所要做的内容.市场这块弹层很多,但功能不尽如人意.下面分享早些时候自己编写,以及现在还在应 ...

  10. vscode debugger for chrome 调试webpack的配置问题

    module.exports = { entry: './app.ts', output: { filename: 'bundle.js', publicPath: '/assets', devtoo ...