Question

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

第三方决定显示一个模态窗口，垂直居中于初始页面加载。

我遇到的问题是手机（特别是iOS 5移动版Safari）会自动调整iframe的大小以适应内容，从而导致模式窗口呈现在屏幕底部，由于这是很多很多像素。

我已经尝试了一切我能想到的iframe只是以固定的尺寸显示，但没有任何效果。

即使使用height

!important

使用div在-webkit-overflow-scrolling: touch;中包装iframe似乎有效，但在这种情况下，仍然会导致iframe扩展，从而在屏幕外显示模态窗口。
添加scrolling="no"允许iframe以固定大小显示，但我现在无法让iframe滚动。

我想知道iframe是否有其他选择，或者我是否可以采取任何措施让iframe以正确的尺寸正确显示。

哦，我必须提一下，我不能简单地在新窗口/标签页面中打开第三方链接，因为这个网页已被烘焙到我无法控制的应用程序中。

<!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>

Answer 1

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

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

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

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

允许移动设备上的iframe溢出

1 个答案: