Welcome to WebmasterWorld Guest from 54.234.244.30

Forum Moderators: not2easy

Message Too Old, No Replies

Background when iframe loading

     
2:00 pm on Jul 17, 2011 (gmt 0)

Full Member

5+ Year Member

joined:Aug 17, 2007
posts: 320
votes: 0


I have an iframe on a site which takes a while to load content between pages, is there any way I can have a loading image or animated gif while the iframe is loading the next page instead of a white background?

Also I can't control the content of the pages in the iframe so can't add styles to it.
3:01 pm on July 17, 2011 (gmt 0)

Senior Member

WebmasterWorld Senior Member penders is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:July 3, 2006
posts: 3123
votes: 0


If you are controling the content of the iframe from the outer page then you could probably hide the iframe when you change the iframes src and show it again in the onload event of the iframe? You could then show anything you like whilst the iframe is hidden.
9:14 am on July 18, 2011 (gmt 0)

Full Member

5+ Year Member

joined:Aug 17, 2007
posts: 320
votes: 0


no unfortunately the iframe location is changed within the iframe. I've seen a site achieve it somehow but it was part of their payment pages (3D secure), can't remember where now though.
9:41 am on July 18, 2011 (gmt 0)

Senior Member

WebmasterWorld Senior Member penders is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:July 3, 2006
posts: 3123
votes: 0


...the iframe location is changed within the iframe.


Is the iframe content on another domain? Although whether internal/external I would have thought the only (reliable) way to display a loading image would be from the pages in the iframe themselves?!

Can the outer document detect when the source URL of the iframe changes? I would have thought it would need to be polling continuously if this was possible?
8:29 am on July 19, 2011 (gmt 0)

Full Member

5+ Year Member

joined:Aug 17, 2007
posts: 320
votes: 0


yes it's all external domains
3:56 pm on July 19, 2011 (gmt 0)

Senior Member

WebmasterWorld Senior Member rocknbil is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Nov 28, 2004
posts:7999
votes: 0


About all you can do is use one of the bazillion lightboxes out there the create an overlay, though I don't know how you'd get the trigger that the frame has fully loaded. As mentioned, cross frame scripting on other domains is not allowed (would be a serious security flaw if you could.)
9:59 am on July 23, 2011 (gmt 0)

Senior Member

WebmasterWorld Senior Member 5+ Year Member

joined:Aug 9, 2008
posts: 961
votes: 0


I'm coming to this late, but recall that except in ie, iframe will accept a background-image (and also a background-color), so it is quite possible to set a "loading" image/animated gif if desired. The issue would be that the background-color of the iframe content is stacked higher than the background-image, which may mean that the image is obscured quite quickly.

Unfortunately the default background for iframes in ie is #fff. This can be overcome by setting allowtransparency="true" on the iframe element, but that is proprietary and will not validate. Note the msdn documentation [msdn.microsoft.com] states that the background-color on the iframe content must also be set to transparent, but having tested in ie6-8 (not 9), that does not seem to be required.
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members