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 && 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 && this.readyState != 'complete') return;
     else {
         onComplete();
     }

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

机器人 2009-02-10 15:10 于 北京

此条目发表在 LAMP 分类目录,贴了 , , , 标签。将固定链接加入收藏夹。

iframe载入完成时的事件监听》有 70 条评论

  1. I’m sure loads of consumers have had different things to say about this submit, and some of them are producing a fantastic level, but I do value how you view it. Appreciate your sharing sharing.

  2. *.. I am really thankful to this topic because it really gives great information ‘*”

  3. Of course, what a fantastic site and enlightening posts, I definitely will bookmark your blog.Best Regards!

  4. An fascinating dialogue is price comment. I feel that you need to write extra on this matter, it won’t be a taboo subject but generally individuals are not enough to talk on such topics. To the next. Cheers

  5. Crispin 说:

    Have you deemed adding extra videos for your websites to help keep the readers more interested? I mean I just read over the article of yours and it was very excellent consider I’m really a visual learner,I discovered that for being more helpful. Just my my idea, Good luck

  6. I am 69 years old and I was searching for this and final i find here. This is just awesome site and article based or true handwork. Thanks for sharing with us.

  7. Tanesha Monnet 说:

    I have really enjoyed reading Sue’s short stories. They give one reason to pause. While some are not for the faint of heart they touch the center of some issues at hand.

  8. zhangyq 说:

    我用jquery代码如下:g.frame.bind(‘load’, function (){。。。} 绑定是不是可以并且浏览器的兼容性问题。因为你兼容浏览器的代码是:
    oFrm.onload = oFrm.onreadystatechange = function() {。。。}。
    还有属性iframe属性readyState是任何浏览都有的吗?希望得到你的帮助!!!谢谢

  9. Pingback 引用通告: Decorative Dog Kennels

  10. Pingback 引用通告: Modern NZ Patio Canopy

  11. Pingback 引用通告: How to Train Your Dog to Run With You

  12. Pingback 引用通告: Portable Gazebos

  13. Pingback 引用通告: Thai Lottery Win Tip New Paper Formula

  14. Pingback 引用通告: Outdoor Furniture Trends

  15. Pingback 引用通告: Modern Cat Accessories

  16. Pingback 引用通告: Some Reasons To Buy A Sofa Bed

  17. Pingback 引用通告: Outdoor Sofa Beds

  18. Pingback 引用通告: How to Clean an Outdoor Sofa Bed

  19. Pingback 引用通告: Purchasing Sofa Beds

  20. Pingback 引用通告: Modern Guest Bedroom Furniture

  21. Pingback 引用通告: Outdoor Gazebo Tumblr

  22. Pingback 引用通告: Pet Accessories

  23. Pingback 引用通告: Outdoor Furniture Living Trends

  24. Pingback 引用通告: The Best Bike Repair Stand

  25. Pingback 引用通告: Tips for Purchasing a Garden Shed

  26. Pingback 引用通告: Regulation in Dog Training: Auckland

  27. Pingback 引用通告: Farm Supplies NZ

  28. Pingback 引用通告: Breast Cancer Prevention

  29. Pingback 引用通告: Modern Mehndi Designs

  30. Pingback 引用通告: AtoZ Cancer Types

  31. Pingback 引用通告: sirius latest movs643 abdu23na5226 abdu23na37

  32. Pingback 引用通告: New Year Wishes

  33. Pingback 引用通告: New Year Quotes

  34. Pingback 引用通告: 4 Reasons For Staging an Empty House

  35. Pingback 引用通告: Home Gardening: Your First Steps to Planning Your Garden

  36. Pingback 引用通告: Dental care

  37. Pingback 引用通告: Flooring & Roofing

  38. Pingback 引用通告: Human Rights

  39. Pingback 引用通告: Desitnations

  40. Pingback 引用通告: Buy And Sell Real Estate Today

  41. Pingback 引用通告: Pumpkins in all of their glory

  42. Pingback 引用通告: Gardens Guide

  43. Pingback 引用通告: Goodbye to Goodbye

  44. Pingback 引用通告: Top 10 Most Beautiful Actress In Pakistan 2018

  45. Pingback 引用通告: Baby Accessories

  46. Pingback 引用通告: Industries

  47. Pingback 引用通告: Destinaqtion Tips

  48. Pingback 引用通告: Food And Drinks

  49. Pingback 引用通告: Travel Gear

  50. Pingback 引用通告: Good Health 24/7

  51. Pingback 引用通告: The Digital Future of the Hotel Industry Starts at Home

  52. Pingback 引用通告: Real Estate Deals

  53. Pingback 引用通告: Cyber Mall

  54. Pingback 引用通告: Destinations

  55. Pingback 引用通告: Tips and news

  56. Pingback 引用通告: Furniture

  57. Pingback 引用通告: Cleaning

  58. Pingback 引用通告: Home Improvement

  59. Pingback 引用通告: pak nts results

  60. Pingback 引用通告: Building and COnstruction

  61. Pingback 引用通告: Travel Tips

  62. Pingback 引用通告: Travel Accommodation

  63. Pingback 引用通告: Credit

  64. Pingback 引用通告: Skin Care

  65. Pingback 引用通告: Home Improvement

  66. Pingback 引用通告: Travel Tours

  67. Pingback 引用通告: Dental care

go sports qoutes进行回复 取消回复

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>