2

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

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

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

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

  1. 添加height属性或样式被忽略，即使!important
  2. div用with包裹 iframe-webkit-overflow-scrolling: touch;似乎可行，但在这种情况下，仍会导致 iframe 扩展，从而在屏幕外显示模态窗口。
  3. 添加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>
4

1 回答 1

0

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

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

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

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

于 2013-06-30T23:37:33.763 回答