iFrame and Mobile Safari (iPad/iPhone)

问题:

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?

回答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.

回答2:

After struggling hard, finally i found a way to make iframe scroll in ios.Do it as follows:

Just place an iframe in div (div like elements which acts as container) and apply the styles as follows and this works perfectly.

.iframe {
    overflow: scroll !important;
    width: 100%;
    height: 100%;
    border: none;
}

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

As i am working in GWT, for GWT people here is the suggestion. In case of GWT just place an iframe in ScrollPanel (div) and apply the styles as above.

回答3:

First I used below code for Iframe , this work for all websites and android mobileapp,ipad except iphone. While in iphone button click not work ans css get disturbed.

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

Then we use height in pixel which is max where we strat it from 2000px and reduced still it work and set width=100%. This is work for all devices.

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