IFrame and Mobile Safari (iPad / iPhone)

Question

Here is the problem I have and MUST on the iframe web page. This iframe must have a specific size of both width and height. This does NOT work in iOS, because the beautiful iOS decided to ignore the frame height attribute and will force it to display everything (jerky!).

How are you going to make it act like a normal iframe?

Answer 1

I found a way to do this if you own or have access to change how the page was created.

If you are managing the iframed in webpage, one of the ways I have found that works well is to surround all the content (DO NOT FIX) with the div directly on the iframed page. Therefore, immediately after the tag, you place your tag.

Then, check for Safari mobile AND if it is iframed.

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

If it meets these criteria, then set the height of the div that you placed on the frame page for what should be the height of the iframe, and set the div overflow to auto. This will create the illusion that it is an iframe.

Now, 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 because the window (iframe) automatically expands it, which is not very useful because the iframe will already be expanded.

Answer 2

After hard work, finally I found a way to do iframe scrolling in ios. It looks like this:

Just put the iframe in the div (div as elements that act like a container) and apply the styles as follows, and this works great.

 .iframe { overflow: scroll !important; width: 100%; height: 100%; border: none; } .div { overflow: hidden; width: 100%; height: 100%; border: none; background-color: #FFF; } 

How I work at GWT, for GWT people this is a suggestion. In the case of GWT, just put the iframe in the ScrollPanel (div) and apply the styles as above.

Answer 3

At first I used below code for Iframe, this work for all websites and Android mobileapp, ipad except iphone. While in the iphone button click don't work and css will be broken.

 <iframe class ="holds-the-iframe" src="http://stackoverflow.com" style="width:100%; height:100%;" seamless="seamless" ></iframe> 

Then we use the height in the pixel, which is max, where we handle it from 2000px and reduce it while it works, and set width = 100%. This is a job for all devices.

 <iframe src="http://stackoverflow.com" style="width:100%;height:1500px;"></iframe>