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.

如果您控制的网页是iframed in，我发现哪种方式效果很好的方法是将整个内容（不是IFRAME）用div直接包围在内部iframed页面。因此，在标记之后放置标记。

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移动设备和它是否为iframed。

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的溢出设置为auto。这将产生一种错觉，它是一个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（窗口）或类似内容的元素，请确保将其切换为使用因为窗口（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屋！