11

iframe を拡大して大きくする必要があります (iframe のコンテンツのソース コードを制御することはできません)。私は-webkit-transform: scale(1.3)CSSプロパティを介してそれを達成しようとしています。

iframe のコンテンツは正しく拡大されていますが、iframe 内のいずれかのコントロールに触れようとすると、間違った場所でタッチ イベントが受信されているようです (コントロールの「影」が強調表示されていることがわかります)。タッチ時に間違った場所)。そのため、イベント ハンドラーが機能していません (タッチが間違った場所で検出されるため、イベント ハンドラーが呼び出されていないと思われます)。誰もこの問題に遭遇しましたか? 解決できますか？

問題が発生するテスト ケースを作成しました (iPad Safari で試してください): http://jsfiddle.net/9vem2/

より読みやすい形式のソース:

親ページ (iframe のコンテナー):

<!DOCTYPE html>
<html>
<head>
    <title>Parent</title>

    <style type="text/css"> 
        iframe
        {        
            left: 200px;
            -webkit-transform: scale(1.3);
        }
    </style>    
</head>

<body>
    <h2>Parent</h2>
    <iframe src="child.html"></iframe>
</body>
</html>

子ページ (iframe コンテンツ):

<!DOCTYPE html>
<html>
<head>
    <title>Child</title>
</head>

<body>
    <h2>Child</h2>
    <input type="text"></input>
    <button onclick="alert('hello');">Button</button>
</body>
</html>
4

3 に答える 3

3

これはハッキーな解決策のように感じますが、バグのように見えるものを修正しているので、それは問題ではないと思います。2Dでスケーリングするのではなく、3Dでiframeをビューアに向かって移動しました。次のデモを参照してください：http：//jsfiddle.net/ianlunn/MSUmS/

次の<body>ように、は3D空間になります。

body {
 -webkit-perspective: 800px;
}

次に、iframeはその3D空間のZ軸に沿って視聴者に向かって移動します。

iframe {
    -webkit-transform: translateZ(130px);
}

これは、特にiframeが。以外のものでラップされている場合は、実際のアプリケーションで変更が必要になる場合があります<body>。

于 2012-07-23T12:21:31.860 に答える
0

iFrame をレスポンシブにする方が簡単かもしれません。ブラウザーのサイズが変更されると、レスポンシブなコンテンツも変更されます...スケールはフレームをスケーリングするだけで、コンテンツを再調整しないように見えるため、これで問題が解決する可能性があります。

http://jsfiddle.net/D2uBW/

あなたが探しているものにどれだけ近いか教えてください。考えや修正があればコメントしてください.

于 2012-07-26T16:27:16.137 に答える
0

Phonegap Iframe の使用法で確認できるように、iOS 5 での iframe 実装に関するいくつかのバグがあります。phonegap を使用していない場合でも、HTMS/JS/CSS ベースであるため、役立つヒントを見つけることができます。その文書の最後の段落を引用します。

iOS 5 以降でネイティブ スクロールを使用する場合、iFrame が干渉し、スクロール ジェスチャが正しく解釈されない可能性があります。これは Apple の実装におけるバグであり、唯一の回避策は、iFrame の使用を避けるか、別のスクロール ライブラリ (iScroll など) を使用することです。

また、最終的にすべてDOMにロードされるため、親ウィンドウからiframeのHTMLにCSSファイルを挿入できると思われるJavascriptソリューションを試しましたか

于 2013-10-01T16:25:25.317 に答える