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载入完成时的事件监听》有 135 条评论

  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

  68. Pingback 引用通告: Bath and Shower

  69. Pingback 引用通告: Get insight into zero interest credit cards

  70. Pingback 引用通告: Thai lottery tips

  71. Pingback 引用通告: Technology

  72. Pingback 引用通告: Tech News

  73. Pingback 引用通告: Investment

  74. Pingback 引用通告: Used car

  75. Pingback 引用通告: Loan

  76. Pingback 引用通告: Student Loans

  77. Pingback 引用通告: Travel

  78. Pingback 引用通告: Healthy Eating

  79. Pingback 引用通告: Swimming pools

  80. Pingback 引用通告: Investment

  81. Pingback 引用通告: Pcso Best Swertres Tips and Tricks

  82. Pingback 引用通告: Swertres Angles

  83. Pingback 引用通告: Swertres Fanatics

  84. Pingback 引用通告: Used Cars

  85. Pingback 引用通告: Health

  86. Pingback 引用通告: Education

  87. Pingback 引用通告: Health

  88. Pingback 引用通告: Auto

  89. Pingback 引用通告: Careers

  90. Pingback 引用通告: Health and Fitness

  91. Pingback 引用通告: Fashion Jewellery

  92. Pingback 引用通告: Jewelry Diamonds

  93. Pingback 引用通告: Furniture

  94. Pingback 引用通告: thai lottey 3up

  95. Pingback 引用通告: qayamat ki raat

  96. Pingback 引用通告: Unique Business Ideas

  97. Pingback 引用通告: New Technology Development

  98. Pingback 引用通告: Pros and cons of using social media for business

  99. Pingback 引用通告: HOW DO YOU DIAGNOSE AND TREAT AN EAR INFECTION?

  100. Pingback 引用通告: Virtual Education

  101. Pingback 引用通告: Scholarship Opportunities

  102. Pingback 引用通告: Edinburgh Online Global Health Scholarships

  103. Pingback 引用通告: Information Technology Scholarship

  104. Pingback 引用通告: Human Development Scholarship

  105. Pingback 引用通告: YKK Leaders 21 at Waseda University

  106. Pingback 引用通告: New Home Remedies

  107. Pingback 引用通告: A GUIDE TO GETTING A HAIR TRANSPLANT IN TURKEY

  108. Pingback 引用通告: Home Improvements – Selling Your Home

  109. Pingback 引用通告: Solar panels replaced tarmac on a road – here are the results

  110. Pingback 引用通告: 17 Tools Every Gardener Should Own

  111. Pingback 引用通告: OVERSIZE / OVERWEIGHT BAGGAGE AND MUSICAL INSTRUMENTS

  112. Pingback 引用通告: Free Guest Post

  113. Pingback 引用通告: Internet Marketing

  114. Pingback 引用通告: Culture

  115. Pingback 引用通告: Entertainment

  116. Pingback 引用通告: Centeral Health

  117. Pingback 引用通告: Turk Bulgar

  118. Pingback 引用通告: Health

  119. Pingback 引用通告: LatestImonedinozze

  120. Pingback 引用通告: How to Center

  121. Pingback 引用通告: Gadgets

  122. Pingback 引用通告: Cosmetic Medical Procedures For The Body You Want

  123. Pingback 引用通告: Deals

  124. Pingback 引用通告: Home Improvement

  125. Pingback 引用通告: Trucks

  126. Pingback 引用通告: BabyCare

  127. Pingback 引用通告: Home Garden

  128. Pingback 引用通告: Trends

  129. Pingback 引用通告: Home Decor

  130. Pingback 引用通告: DENTAL CARE

  131. Pingback 引用通告: Auto

  132. Pingback 引用通告: BUSINESS

owen进行回复 取消回复

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

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