允许移动设备上的 iframe 溢出答案

【问题标题】：Allowing iframe overflow on mobile devices允许移动设备上的 iframe 溢出
【发布时间】：2013-06-26 00:03:59
【问题描述】：

我必须在平板电脑和手机上显示的网页上显示第 3 方链接（跨域）。

第 3 方已决定显示一个模式窗口，在初始页面加载时垂直居中。

我遇到的问题是手机（尤其是 iOS 5 移动版 Safari）会自动调整 iframe 的大小以适应内容，导致模式窗口呈现在屏幕底部之外，因为它是很多很多像素高。

我已经尝试了所有我能想到的让 iframe 以固定大小显示的方法，但没有任何效果。

添加height 属性或样式将被忽略，即使使用!important
用-webkit-overflow-scrolling: touch; 将iframe 包裹在div 中似乎可行，但在这种情况下，仍会导致iframe 扩展，从而在屏幕外显示模态窗口。
添加 scrolling="no" 允许 iframe 以固定大小显示，但我现在无法让 iframe 滚动。

我想知道iframe 是否有任何替代品，或者我可以做些什么来让 iframe 以固定大小正确显示。

哦，我必须提一下，我不能简单地在新窗口/标签页中打开第 3 方链接，因为该网页已嵌入到我无法控制的应用程序中。

<!doctype html>
<html>
    <head>
        <title>Test</title>
        <style>
            iframe
            {
                height: 100px !important;
            }
        </style>
    </head>

    <body>
        <iframe style="height:100px;" height="100" src="http://dump.mrslayer.com/test2.html"></iframe>

        <script>
            setTimeout( function( ) {
                var iframe = document.getElementsByTagName( 'iframe' )[0];
                iframe.style.height = "100px";
                iframe.height = 100;
            }, 1000 );
        </script>
    </body>
</html>

【问题讨论】：

也许伴随的 css 可能会有所帮助。
@GCyrillus，我已经包含了一个最基本示例的整个 HTML 代码，经过各种尝试，但在 iOS 5 Safari 上都没有任何作用。
好吧，我看不到绝对或固定的位置和 iframe 单独站立。诀窍可能是将边距或边框设置为 body/html 以挤压正文区域，而不是调整 iframe 的大小，无论如何都会增长 100% ?.
无论body 和html 或包装器div 上的高度、边距或内边距如何，框架仍会调整大小并因此导致主体扩展。
啊，抱歉没有提供更多帮助。

标签： javascript html css mobile iframe

【解决方案1】：

您可以使用 PHP，但这会打印与您的文档内联的整个文档内容。

<?php
    echo file_get_contents("http://dump.mrslayer.com/test2.html");
?>

如果这是一个问题，您可以使用正则表达式或类似的东西来删除<body> 标记之前和</body> 标记之后的所有内容file_get_contents()。

您可以将此函数包含在<div> 中，使用CSS 应该更容易控制。这是我能想到的 iframe 最简单的替代方案。

【讨论】：