web-dev-qa-db-ja.com

iOSブラウザー-JavaScriptを使用してCSSまたはコンテンツを変更すると、iFrameが先頭にジャンプします

この問題は永遠に続いているようです。ある特定の状況下では、iOSブラウザーはこのイライラするバグに直面します。

問題：

IFrameを含むWebページがあり、iFrameのコンテンツドキュメントをプログラムで変更している場合、iFrameはページの先頭にジャンプします。ただし、これは、DOM操作前のページがある程度の高さを超えている場合にのみ発生します。通常、これはビューポートの長さの2倍を超える長さのようです。

この問題は、DOM構造を変更するか、スタイルプロパティを変更するかに関係なく発生します。

このバグは、今回の最新リリース（9.2）を含むiOSにのみ存在します。

javascriptioscssiframebrowser
28
Matt

問題の説明：

問題は、iOSのブラウザ（ 同じレンダリングエンジン を使用するchromeを含む）がiFrameの高さを正しく計算していないため、再描画が発生したときにジャンプ動作が発生することですブラウザ。

ソリューション：

解決策A：iFrameスタイルシートに次のコードを追加すると、ほとんどの場合問題が解決しますが、ドラッグイベントなどのスクロールはこのアプローチで問題を引き起こす可能性があります。

html, body {
    height: 100%;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

ソリューションB：iFrameがすべてをレンダリングしたら、iFrameコンテンツの高さを計算し、インラインを使用してiFrame要素にその高さ値を明示的に設定する必要がありますJavaScriptのスタイル。 iFrameでコンテンツが変更または追加されると、この値を更新する必要があります。ジャンプが再発しないように、常に高さが正しいことを確認する必要があります。

これは、明白なコールバックなしでページを変更するサードパーティのプラグインとウィジェットを扱うときに課題を提示します。今のところこれに対処するための最良のケースは、 mutation observers の使用です。

44
Matt

Ionic 3で解決策を見つけました。次のコードで、ネイティブキーボードをインストールし、入力のオートフォーカスを無効にできます。

「@ ionic-native/keyboard」から{キーボード}をインポートします。

this.Keyboard.disableScroll（true）;

0
Boris Benalcazar

このようなコードを使用する場合

_var doc = document.getElementById(id).contentWindow.document;
doc.open();
doc.write(data);
doc.close();
_

doc.close();を削除してみてください。

0
Eugene