iframe载入完成时的事件监听

经常会遇到这样一种情况。
在iframe里嵌入另外一个页面时。如果iframe载入的页面响应较快，或许我们感觉不到页面载入的不同步，但试想，如果一个需要内嵌到iframe 里的页面的响应很慢，这里会出现一种什么现象呢？这时将会出现所有页面已经载入完成，但在iframe元素处，将会出现空白，直到内嵌页面完成载入时，该 空白处才会显示新载入的页面。
可想而知，一个页面如果长时间的空白，对于浏览者来说将意味着什么。
如果在内嵌页面未载入完成时，给出一种加载提示信息。如：“页面加载中”之类的，我想这对浏览页面用户来讲，将不再是煎熬，更是一种视觉上的享受。
为了实现这样的效果，一般会采用如下原理处理。
·iframe载入区域给出友好的提示信息。
·当iframe载入完成时，清空提示信息，而让iframe显示。
这些都比较容易，但现在的问题的关键是怎么监听iframe元素内的页面已经载入完成。
关键这个问题，一般来讲，会分两种情况的来讨论解决方案。
·同域的嵌套。最好是让子页面调用父页面的方法。
·如果是异域，但子页面无法修改，那么：在Firefox/Opera/Safari中，可以直接使用iframe onload事件；而在IE中，可以通过定时器测定子页面的document.readyState，或者使用iframe onreadystatechange事件计算该事件的响应。
1.同域嵌套。
parent.html

function
 ifrmLoaded(
)
 {

	// code here

}

sub.html

window.onload
 =
 function
(
)
 {

	window.parent
.ifrmLoaded
(
)
;

}

有时候，为了防止自己的页面不被别人嵌套，可以采用如下方式解决：

if
(
window.parent
!=
window)
 window.parent
.location
=
"http://hqlong.com"
;

//or

if
(
window.top
!=
window)
 window.top
.location
=
"http://hqlong.com"
;

2.嵌套页面不能修改，或者异域嵌套。
2.1 Firefox/Opera/Safari中直接使用iframe onload事件

document.getElementById
(
'ifrm'
)
.onload
 =
 function
(
)
 {

	//here doc

}

2.2 在IE下，定时器测document.readyState或者注册iframe onreadystatechange事件
2.2.1 使用定时器

var
 oFrm =
 document.getElementById
(
'ifrm'
)
;

var
 fmState=
function
(
)
{

	var
 state=
null
;

	if
(
document.readyState
)
{

		try
{

			state=
oFrm.document
.readyState
;

		}
catch
(
e)
{
state=
null
;
}

		if
(
state==
"complete"
 ||
 !
state)
 {

			onComplete(
)
;

			return
;

		}

		window.setTimeout
(
fmState,
10
)
;

	}

}
;

//在改变src或者通过form target提交表单时，执行语句：

if
(
fmState.TimeoutInt
)
 window.clearTimeout
(
fmState.timeoutInt
)
;

fmState.timeoutInt
 =
 window.setTimeout
(
fmState,
400
)
;

2.2.2 使用iframe onreadystatechange事件

var
 oFrm =
 document.getElementById
(
'ifrm'
)
;

oFrm.onreadystatechange
 =
 function
(
)
 {

	if
 (
this
.readyState
 &
amp;&
amp;
 this
.readyState
 ==
 'complete'
)
 {

		onComplete(
)
;

	}

}

每当iframe加载页面，过程内会激活onreadystatechange事件三次，相应的状态分别是loading,interactive和complete，而最后一次才是complete.
3. 兼容Firefox/Opera/Safari/IE的处理方式。

var
 oFrm =
 document.getElementById
(
'ifrm'
)
;

oFrm.onload
 =
 oFrm.onreadystatechange
 =
 function
(
)
 {

     if
 (
this
.readyState
 &
amp;&
amp;
 this
.readyState
 !=
 'complete'
)
 return
;

     else
 {

         onComplete(
)
;

     }

参考资料: http://yr.hk/article.asp?id=993