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

  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

  133. Pingback 引用通告: buy cialis

  134. Pingback 引用通告: buy viagra

  135. Pingback 引用通告: cialis

  136. Pingback 引用通告: viagra

  137. Pingback 引用通告: sildenafil 100mg

  138. Pingback 引用通告: cialis generic

  139. Pingback 引用通告: cialis coupon

  140. Pingback 引用通告: cialis 20mg

  141. Pingback 引用通告: levitra

  142. Pingback 引用通告: generic cialis

  143. Pingback 引用通告: cialis online

  144. Pingback 引用通告: tadalafil 5mg

  145. Pingback 引用通告: tadalafil 20mg

  146. Pingback 引用通告: viagra tablets

  147. Pingback 引用通告: door & windows

  148. Pingback 引用通告: sildenafil

  149. Pingback 引用通告: tadalafil

  150. Pingback 引用通告: cialis dosage

  151. Pingback 引用通告: cialis prices

  152. Pingback 引用通告: cialis tablets

  153. Pingback 引用通告: viagra vs cialis

  154. Pingback 引用通告: generic viagra

  155. Pingback 引用通告: viagra connect

  156. Pingback 引用通告: viagra without doctor prescription

  157. Pingback 引用通告: viagra natural

  158. Pingback 引用通告: cialis vs viagra

  159. Pingback 引用通告: tadalafil 20 mg

  160. Pingback 引用通告: tadalafil generic

  161. Pingback 引用通告: cialis 20 mg

  162. Pingback 引用通告: cialis 5 mg

  163. Pingback 引用通告: cialis pills

  164. Pingback 引用通告: cheap cialis

  165. Pingback 引用通告: cialis coupons

  166. Pingback 引用通告: cialis canada

  167. Pingback 引用通告: sildenafil citrate

  168. Pingback 引用通告: viagra pills

  169. Pingback 引用通告: viagra 100mg

  170. Pingback 引用通告: viagra online

  171. Pingback 引用通告: viagra prices

  172. Pingback 引用通告: viagra generic

  173. Pingback 引用通告: generic viagra 100mg

  174. Pingback 引用通告: viagra coupons

  175. Pingback 引用通告: cheap viagra

  176. Pingback 引用通告: generic viagra available

  177. Pingback 引用通告: buy viagra online

  178. Pingback 引用通告: viagra tablet

  179. Pingback 引用通告: sildenafil 20 mg

  180. Pingback 引用通告: sildenafil 100

  181. Pingback 引用通告: buy biaxin

  182. Pingback 引用通告: buy ceftin

  183. Pingback 引用通告: buy chloromycetin

  184. Pingback 引用通告: buy biaxin online

  185. Pingback 引用通告: buy ceftin online

  186. Pingback 引用通告: chloromycetin

  187. Pingback 引用通告: buy cordarone

  188. Pingback 引用通告: Skin Cancer

  189. Pingback 引用通告: celeb flash

  190. Pingback 引用通告: home improvement

  191. Pingback 引用通告: tripadvisor uk

  192. Pingback 引用通告: Power Drive Europe

  193. Pingback 引用通告: halifax online

  194. Pingback 引用通告: Dental Care

  195. Pingback 引用通告: New UK Fashion

  196. Pingback 引用通告: cialis 20mg generic

  197. Pingback 引用通告: generic cialis 20mg

  198. Pingback 引用通告: generic cialis available

  199. Pingback 引用通告: generic cialis tadalafil

  200. Pingback 引用通告: How to Buy the Best Outdoor Gear on a Budget

  201. Pingback 引用通告: The Absolutely Essential Fly Fishing Accessories Guide

  202. Pingback 引用通告: Solar Panel Calculator From Green Recovery

  203. Pingback 引用通告: The Indelicate but Necessary Discussion: Portable Toilets for Trailers

  204. Pingback 引用通告: Best Home Fitness Equipment Pieces to Buy in 2018

  205. Pingback 引用通告: online business

  206. Pingback 引用通告: Legal

  207. Pingback 引用通告: rough guide home improvement

  208. Pingback 引用通告: top 10 games

  209. Pingback 引用通告: Restaurants and hotels

  210. Pingback 引用通告: lifebuzz tech

  211. Pingback 引用通告: speccial education

  212. Pingback 引用通告: news

  213. Pingback 引用通告: furniture

  214. Pingback 引用通告: Wedding

  215. Pingback 引用通告: High Risk Merchant Account Provider

  216. Pingback 引用通告: High Risk Merchant Accounts

  217. Pingback 引用通告: high risk merchant account instant approval

  218. Pingback 引用通告: high risk pharmacy merchant account

  219. Pingback 引用通告: High Risk Payment Gateway

  220. Pingback 引用通告: High Risk Merchant Accounts

  221. Pingback 引用通告: female viagra

  222. Pingback 引用通告: sildenafil tablets

  223. Pingback 引用通告: world travel market

  224. Pingback 引用通告: environmental health

  225. Pingback 引用通告: finance plus uk

  226. Pingback 引用通告: Education Loans

  227. Pingback 引用通告: aviva car insurance

  228. Pingback 引用通告: provillus uk

  229. Pingback 引用通告: wireless Technologies

  230. Pingback 引用通告: education

  231. Pingback 引用通告: Home Improvevment

  232. Pingback 引用通告: finance

  233. Pingback 引用通告: Travel Tips

  234. Pingback 引用通告: Education

  235. Pingback 引用通告: travel tips

  236. Pingback 引用通告: Home gardening

  237. Pingback 引用通告: Travel Insurance

  238. Pingback 引用通告: Investment

  239. Pingback 引用通告: Business and finance

  240. Pingback 引用通告: sildenafil citrate pricing

  241. Pingback 引用通告: fluoxetine 20 mg

  242. Pingback 引用通告: prozac generic

  243. Pingback 引用通告: bactrim ds

  244. Pingback 引用通告: biaxin antibiotic

  245. Pingback 引用通告: ceftin antibiotic

  246. Pingback 引用通告: cephalexin 500mg

  247. Pingback 引用通告: ciprofloxacin 500mg

  248. Pingback 引用通告: fluconazole 150 mg

  249. Pingback 引用通告: bactrim antibiotic

  250. Pingback 引用通告: azithromycin 250 mg

  251. Pingback 引用通告: luxury-best

  252. Pingback 引用通告: mobile phones

  253. Pingback 引用通告: Travel food

  254. Pingback 引用通告: skala photography

  255. Pingback 引用通告: Business

  256. Pingback 引用通告: d-creators

  257. Pingback 引用通告: loans

  258. Pingback 引用通告: air travel

  259. Pingback 引用通告: wedding accessories

  260. Pingback 引用通告: Business

  261. Pingback 引用通告: General info

  262. Pingback 引用通告: real estate

  263. Pingback 引用通告: loans tips

  264. Pingback 引用通告: auto

  265. Pingback 引用通告: nationaal auto forum

  266. Pingback 引用通告: shopping

  267. Pingback 引用通告: dorothy perkins sale bags

  268. Pingback 引用通告: languages

  269. Pingback 引用通告: Special education

  270. Pingback 引用通告: mathematics

  271. Pingback 引用通告: Health

  272. Pingback 引用通告: foughthunger

  273. Pingback 引用通告: Gardening

  274. Pingback 引用通告: Mobiles

  275. Pingback 引用通告: Security

  276. Pingback 引用通告: wedding cake

  277. Pingback 引用通告: trucks

  278. Pingback 引用通告: Loan

  279. Pingback 引用通告: Student Loans

  280. Pingback 引用通告: Business

  281. Pingback 引用通告: the doctor professor

  282. Pingback 引用通告: Editors Picks

  283. Pingback 引用通告: dallas area roofers

  284. Pingback 引用通告: bestworldlifestyle

  285. Pingback 引用通告: pretty house wholesale

  286. Pingback 引用通告: Investment

  287. Pingback 引用通告: Technology

  288. Pingback 引用通告: Business

  289. Pingback 引用通告: adventure travel

  290. Pingback 引用通告: wedding dresses

  291. Pingback 引用通告: wedding hair ideas

  292. Pingback 引用通告: auto-m7

  293. Pingback 引用通告: News Models

  294. Pingback 引用通告: automotive Parts

  295. Pingback 引用通告: teaching

  296. Pingback 引用通告: fast food

owen进行回复 取消回复

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

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