How to make a website handle 3-4 iframe widgets without trouble?

October 25, 2011 10:08 PM

Web design question: too many iFrames.

I have a client who wants her already-feature-heavy website to include, all at the same time, IFRAME widgets from Facebook, Google Maps, and a restaurant reservation system.

The combined force of all these heavy-duty widgets seems to break the site on certain browsers, like IE. IE doesn't want to wait for three different third-party websites to load. It instead just shows white error "could not load this page" boxes.

Is there a good way to make a page cope with so many embedded objects, or to somehow have more patience for longer page loading times?

posted by steinsaltz to Computers & Internet (5 answers total)

Best answer: You're not wrong to use iframes sparingly, though I wouldn't give up on looking for other explanations, because 3 doesn't seem like a large number to me. But perhaps it would help to delay loading the least important widgets with a little bit of Javascript, e.g. through creative use of setTimeout() or a bit of jQuery like this ...

$(document).ready(function() {
   $("#some_div").html("<iframe src='http://google.com'></iframe>"); 
});

posted by Monsieur Caution at 10:41 PM on October 25, 2011 [1 favorite]

Best answer: Wherever there's an option for asynch, just use that. The Facebook Like button JS is asynchronous and does not add to page load time. See the lovely and delightful Yoast.
posted by DarlingBri at 3:35 AM on October 26, 2011

Could it be something to do setting the xmlns attribute?
posted by Magnakai at 5:56 AM on October 26, 2011

Response by poster: Thanks, everyone.
posted by steinsaltz at 11:26 AM on October 26, 2011

Response by poster: I tried Monsieur Caution's trick and it worked great. Next time I will also look into this asynch.
posted by steinsaltz at 3:59 PM on October 26, 2011