iFrame 和 Mobile Safari (iPad/iPhone) [英] iFrame and Mobile Safari (iPad/iPhone)

问题描述

这是问题所在，我有并且需要 iframe 网页.这个 iframe 必须有一定的宽度/高度大小.这在 iOS 中不起作用，因为可爱的 iOS 决定忽略框架的高度属性并强行显示所有内容(混蛋！).

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?

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

推荐答案

如果您拥有或有权修改框架页面，我找到了一种方法来执行此操作.

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

如果您控制被 iframe 嵌入的网页，我发现一种有效的方法是在 iframe 页面内直接用 div 包围整个内容(不是 IFRAME).所以在标签之后，你会放置你的标签.

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.

然后，测试 Safari 移动版，以及它是否带有 iframe.

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;

如果它符合这个标准，那么将你放置在框架页面中的 div 高度设置为 iframe 的高度应该是什么，并将 div 的溢出设置为自动.这会造成它是一个 iframe 的错觉.

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.

现在，最后但并非最不重要的是将 iframe 标签包裹在

Now, last but not least wrap the iframe tag in

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

如果您有使用 jQuery(window) 或类似元素的元素，请务必将其切换为使用 DIV，因为 window(iframe) 会自动扩展它不是很有帮助，因为 iframe 已经扩展了.

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.

这篇关于iFrame 和 Mobile Safari (iPad/iPhone)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！