7

这是问题所在，我有并且需要 iframe 网页。此 iframe 必须具有一定的宽度/高度。这在 iOS 中不起作用，因为可爱的 iOS 决定忽略框架的高度属性并强制显示所有内容（混蛋！）。

你如何让它像一个普通的 iframe 一样？

4

3 回答 3

8

如果您拥有或有权修改这两个框架页面，我找到了一种方法。

如果您控制网页的 iframe，我发现一种行之有效的方法是用 div 直接在 iframe 页面内包围整个内容（不是 IFRAME）。因此，在标签之后，您将放置您的标签。

然后，测试 Safari 移动版是否是 iframed。

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

如果它满足这个标准，那么将你放入框架页面的 div 的高度设置为 iframe 的高度应该是什么，并将 div 的溢出设置为自动。这将产生它是 iframe 的错觉。

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

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

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

于 2013-10-29T19:48:58.820 回答
1

经过苦苦挣扎，终于找到了在ios中实现iframe滚动的方法，如下：

只需在 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;
}

当我在 GWT 工作时，这里是 GWT 人的建议。在 GWT 的情况下，只需在 ScrollPanel (div) 中放置一个 iframe 并应用上述样式。

于 2015-03-17T15:18:35.887 回答
0

首先，我为 Iframe 使用了下面的代码，这适用于所有网站和 android 移动应用程序，ipad 除了 iphone。虽然在 iphone 按钮中单击不起作用，但 css 会受到干扰。

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

然后我们使用像素高度，这是我们从 2000 像素开始分层的最大高度，并减少它仍然可以工作并设置宽度 = 100%。这适用于所有设备。

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

于 2016-11-07T10:54:40.030 回答