web-dev-qa-db-ja.com

iOS（モバイルサファリ）でのIFrameの高さの問題

ページソースの例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>Page</title>
</head>
<body>
<div class="main" style="height: 100%;">
    <div class="header" style="height: 100px; background-color: green;"></div>

    <iframe src="http://www.wikipedia.com"
            style="height: 200px; width: 100%; border: none;"></iframe>

    <div class="footer" style="height: 100px; background-color: green;"></div>
</div>
</body>
</html>

問題は、IFramesインラインスタイルの200pxのheightがモバイルサファリで無視されることです。

enter image description here

また、次のコードではまったく機能しないVanilla JavaScriptを使用して、IFrameの高さを動的に変更したいと思います。

document.getElementsByTagName('iframe')[0].style.height = "100px"

heightスタイルの値はdevツールに従って正しく変更されますが、実際にレンダリングされたIFrameの高さは変わらないため、単に無視されます。

これはモバイルSafariでのみ問題であるようで、デスクトップSafari、Firefox、Chrome、Androids WebViewなどの最新バージョンで期待どおりに機能しています。

テストページ： http://devpublic.blob.core.windows.net/scriptstest/index.html

Ps.:実際のiDeviceが手元にないので、これをbrowserstackのさまざまなデバイスでテストし、そこにスクリーンショットを撮りました。

javascriptiosiphoneiframemobile-safari
22
suamikim

iOS SafariでIFrameを応答させる方法は？

iFrameにはiOSでのみ問題があるため、iframeをそれに適応させる必要があります。

Iframeをラップするdivを配置し、iframeにcssを設定し、追加することができました：属性scrolling = 'no'を追加しました。

幸運を祈ります。

13
Gabriel Augusto

同じ問題が発生しました。そして、私が見つけることができるすべての解決策を試した後、私は最終的にそれを解決する方法を見つけました。

この問題はiOS Safariが原因で発生します。iframeの高さをページのコンテンツに合わせて自動的に拡張します。

Scrolling = 'no'属性をiframeに<iframe scrolling='no' src='content.html'>、この問題は解決できましたが、iframeはページのコンテンツ全体を表示できませんでした。フレームを超えるコンテンツはカットされます。

そのため、iframeをラップするdivを配置し、その中のscrollイベントを処理する必要があります。

<style>
.demo-iframe-holder {
  width: 500px;
  height: 500px;
  -webkit-overflow-scrolling: touch;
  overflow-y: scroll;
}

.demo-iframe-holder iframe {
  height: 100%;
  width: 100%;
}
</style>

<html>
<body>
    <div class="demo-iframe-holder">
        <iframe src="content.html" />
    </div>
</body>
</html>

参照：

https://davidwalsh.name/scroll-iframes-ios

iOS SafariでIFrameを応答させる方法

それが役に立てば幸い。

11
Freya Yu