2

タブレットや携帯電話に表示される Web ページにサードパーティのリンク (クロスドメイン) を表示する必要があります。

サードパーティは、最初のページ読み込みを垂直方向に中央に配置して、モーダル ウィンドウを表示することを決定しました。

私が直面している問題は、携帯電話 (特に iOS 5 モバイル Safari) がコンテンツに合わせて自動的にサイズ変更iframeされ、モーダル ウィンドウが画面の下部からはみ出してレンダリングされることです。

iframeを固定サイズで表示するために考えられることはすべて試しましたが、何も機能しません。

  1. height属性またはスタイルの追加は無視されます。!important
  2. で iframe をラップするdivと-webkit-overflow-scrolling: touch;うまくいくように見えますが、この状況でも iframe が拡大し、モーダル ウィンドウが画面外に表示されます。
  3. 追加scrolling="no"すると、iframe を固定サイズで表示できるようになりますが、iframe をスクロールすることができません。

iframeiframe を固定サイズで適切に表示するための代替手段があるかどうか、またはできることがあるかどうか疑問に思っています。

ああ、私が言及しなければならないのは、このウェブページは私が制御できないアプリに焼き付けられているため、新しいウィンドウ/タブでサードパーティのリンクを単純に開くことはできないということです.

<!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().

この関数を に含める<div>と、CSS で制御しやすくなります。これは、私が考えることができる iframe の最も簡単な代替手段です。

于 2013-06-30T23:37:33.763 に答える