jQuery iFrame 和 Mobile Safari (iPad/iPhone)
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19667785/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
iFrame and Mobile Safari (iPad/iPhone)
提问by user1470118
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!).
这是问题所在，我有并且需要 iframe 网页。这个 iframe 必须具有一定的宽度/高度大小。这在 iOS 中不起作用，因为可爱的 iOS 决定忽略框架的高度属性并强行显示所有内容（混蛋！）。
How do you go about making it act as a normal iframe?
你如何让它作为一个普通的 iframe？
回答by user1470118
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.
如果您控制被 iframe 嵌入的网页，我发现一种有效的方法是在 iframe 页面内直接用 div 包围整个内容（不是 IFRAME）。所以在标签之后，你会放置你的标签。
Then, test for Safari mobile AND if it it's iframed.
然后，测试 Safari 移动版，如果它是 iframe 的。
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.
如果它满足此条件，则将放置在框架页面中的 div 高度设置为 iframe 的高度应为，并将 div 的溢出设置为自动。这会造成它是一个 iframe 的错觉。
Now, last but not least wrap the iframe tag in
现在，最后但并非最不重要的是将 iframe 标签包装在
<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.
如果您有使用 jQuery(window) 或类似元素的元素，请务必将其切换为使用 DIV，因为 window(iframe) 会自动扩展它不是很有帮助，因为 iframe 已经扩展了。
回答by Manne Teja
After struggling hard, finally i found a way to make iframe scroll in ios.Do it as follows:
苦苦挣扎后，终于找到了一种让iframe在ios中滚动的方法，具体操作如下：
Just place an iframe in div (div like elements which acts as container) and apply the styles as follows and this works perfectly.
只需在 div 中放置一个 iframe（类似 div 的元素充当容器）并按如下方式应用样式，这非常有效。
.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.
因为我在 GWT 工作，所以这里是 GWT 人的建议。在 GWT 的情况下，只需在 ScrollPanel (div) 中放置一个 iframe 并应用上述样式。
回答by Alaknanda GAWAD4E
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 ，这适用于所有网站和 android 移动应用程序，ipad iphone 除外。虽然在 iphone 按钮中单击不起作用并且 css 受到干扰。
<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.
然后我们使用像素高度，这是最大的，我们从 2000 像素开始分层并减少它仍然有效并设置宽度 = 100%。这适用于所有设备。
<iframe src="http://stackoverflow.com" style="width:100%;height:1500px;"></iframe>
