jquery - iFrame and Mobile Safari (iPad/iPhone)

Question

Here is the problem, I have and NEED to iframe webpage. This iframe has to have a certain size both width/height. This does NOT work in iOS because lovely iOS decided to ignore the height attribute of frames and will forcibly display everything (jerks!).

How do you go about making it act as a normal iframe?

Answer 1

I found a way to do this IF you own or have access to modifying both the framed page.

If you control of the webpage being iframed in, one way that I found that works well is to surround the entire content (NOT THE IFRAME) with a div directly INSIDE the iframed page. So right after the tag you'd place your tag.

Then, test for Safari mobile AND if it it's iframed.

browser_=/iPhone|iPad/i.test(navigator.userAgent);
isInIframe = (window.location != window.parent.location) ? true : false;

If it meets this criteria, then set the div's height that you placed into the framed page to what the iframe's height SHOULD be and set the overflow of the div to auto. This will create the illusion that it's an iframe.

Now, last but not least wrap the iframe tag in

<div style="-webkit-overflow-scrolling:touch; overflow: auto;">

If you have elements that used jQuery(window) or something like that be sure to switch it to use the DIV instead since the window(iframe) automatically expands it's not very helpful because the iframe will have already expanded.