`
xinklabi
  • 浏览: 1586369 次
  • 性别: Icon_minigender_1
  • 来自: 吉林
文章分类
社区版块
存档分类
最新评论

document.readyState等属性（判断页面是否加载完成）

 
阅读更多

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;
background-color:#999;}
-->
</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>
分享到：
| maven多模块使用，父模块(modules使用，pa ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    C#判断webbrowser页面最终加载完成

    4. **等待页面状态变化**：另一种方法是检查`WebBrowser.ReadyState`属性，当其值为`WebBrowserReadyState.Complete`时，通常意味着页面加载完成。但同样，这并不一定适用于所有情况，尤其是当页面有异步加载内容时...

    javascript页面加载完执行事件代码

    在JavaScript中，可以通过监听document对象的readyState属性变化来判断页面是否加载完毕。readyState属性用于描述当前文档的加载状态，有以下几种值： - loading：页面正在加载中。 - interactive：页面已经完成DOM...

    用js判断页面是否加载完成实现代码

    在前端开发中，判断页面是否加载完成是一个常见的需求，尤其是在需要在页面完全加载后执行某些操作，如表单提交、弹窗显示、数据请求等。JavaScript提供了一种方法来监听页面加载状态的变化，以便我们可以基于页面...

    页面加载时 提示 正在加载中

    JavaScript可以通过监听`window.onload`或`document.readyState`事件来判断页面是否加载完成。当这些事件触发时，可以调用相应的函数隐藏加载提示： ```javascript window.onload = function() { var ...

    javascript经典特效---打开页面的等待（三）.rar

    - `document.readyState`：可以使用`'loading'`、`'interactive'`和`'complete'`三个状态来判断页面的加载进度。在状态变为`'interactive'`时，DOM已经构建完成，可以显示等待效果；在状态变为`'complete'`时，页面...

    基于javascript原生判断DOM是否加载完毕

    为了在DOM加载完毕后执行代码，可以使用`onReady`函数，利用`document.readyState`属性与`DOMContentLoaded`事件进行判断。具体实现方式如下： 1. 首先检查`document.readyState`属性值，如果值为`interactive`或`...

    基于JS判断iframe是否加载成功的方法(多种浏览器）

    总的来说，判断`iframe`是否加载成功的关键在于使用`onreadystatechange`（IE）和`onload`（非IE）事件，并结合`readyState`属性（IE）来确定加载状态。正确地设置和移除事件处理函数，可以在`iframe`加载完成后执行...

    JS判断iframe是否加载完成的方法

    总之，判断`iframe`是否加载完成是通过监听`readyState`或`onload`事件来实现的。了解并掌握这些技术，可以帮助你更有效地控制和管理页面中的`iframe`元素，提升用户体验。在实际项目中，你可能需要根据实际情况对...

    js页面加载进度条

    同时，`document.readyState`属性也可以用来判断页面的加载状态，如"loading"、"interactive"和"complete"。 2. **CSS动画**：为了实现动态效果，CSS3的`@keyframes`规则可以定义动画的过程，通过改变特定时间点的...

    用javascript实现jquery的document.ready功能的实现代码

    1. **检测文档加载状态**：在原生JavaScript中，可以通过监听`DOMContentLoaded`事件或者检查`document.readyState`属性来判断文档是否加载完成。 2. **注册回调函数**：提供一个接口，允许用户注册回调函数，当文档...

    JS判断图片是否加载完成方法汇总(最新版)

    本文将介绍四种常用的方法来判断图片是否加载完成。 1. **load事件** load事件是JavaScript中最直接的方式，当图片加载完成后触发。例如： ```javascript var img = document.querySelector('img'); img.onload...

    JS实现判断图片是否加载完成的方法分析

    在JavaScript中，我们经常需要处理图片的加载情况，特别是在页面加载过程中确保图片资源已经完全加载。这篇文章将介绍几种常见的JS实现判断图片是否加载完成的方法，这些方法有助于优化用户体验，特别是对于那些依赖...

    怎么判断js脚本加载完成

    `onreadystatechange`事件会在脚本的加载状态改变时被触发，我们可以通过检查`readyState`属性来判断脚本是否加载完成。`readyState`有以下几个可能的值： 1. `loading` - 脚本正在加载。 2. `loaded` - 脚本已经...

    js下判断 iframe 是否加载完成的完美方法

    判断一个iframe是否加载完成是确保页面功能完整性和用户体验的关键步骤。这里我们将详细探讨两种方法来实现这一目标，并分析它们的优缺点。 首先，传统的做法是利用`onload`和`onreadystatechange`事件。这两种方法...

    如何让页面加载完成后执行js

    对于不支持DOMContentLoaded事件的浏览器（如旧版IE），它通过检查document.readyState属性来判断何时可以执行回调函数。当document.readyState为"complete"时，意味着文档已经完全加载完成，此时执行回调。 实现$...

    判断iframe是否加载完成的完美方法

    判断`iframe`是否加载完成的方法有多种，这里将详细讨论两种常见且有效的方法。 首先，我们可以使用`onload`事件来监听`iframe`的加载状态。当`iframe`的内容完全加载完毕，包括图片、脚本等所有资源，`onload`事件...

Magicbox
Global site tag (gtag.js) - Google Analytics