iframeの親ウィンドウがスクロールするときに、iframe内でModalPopupを再センタリングするのを手伝ってください
-
03-07-2019 - |
質問
iframeを含むWebページがあります(好きではありませんが、そうする必要があります)。クロスドメインのiframeではないため、心配する必要はありません。
iframeの親の幅と高さに基づいてModalPopup(オーバーライドされた AjaxControlToolkit.ModalPopupBehavior._layout メソッドから呼び出される)のセンタリングを行うjQuery拡張機能を作成しました。 iframeがページの中央になくても中央に見えます。特に、iframeを追加したWebページがquirksモードで実行されているので、これには多くの注意が必要です。
今、 AjaxControlToolkit.ModalPopupBehavior._attachPopup もオーバーライドしました。これにより、親ウィンドウがサイズ変更またはスクロールしたときに、iframe内のModalPopupが親ウィンドウの新しいサイズに相対してリセンターします。 。ただし、ポップアップを親ウィンドウの resize イベントにアタッチする同じコードは、親ウィンドウの scroll イベントでは機能しません。以下のコードとコメントを参照してください。
AjaxControlToolkit.ModalPopupBehavior.prototype._attachPopup = function() {
/// <summary>
/// Attach the event handlers for the popup to the PARENT window
/// </summary>
if (this._DropShadow && !this._dropShadowBehavior) {
this._dropShadowBehavior = $create(AjaxControlToolkit.DropShadowBehavior, {}, null, null, this._popupElement);
}
if (this._dragHandleElement && !this._dragBehavior) {
this._dragBehavior = $create(AjaxControlToolkit.FloatingBehavior, {"handle" : this._dragHandleElement}, null, null, this._foregroundElement);
}
$addHandler(parent.window, 'resize', this._resizeHandler); // <== This WORKS
$addHandler(parent.window, 'scroll', this._scrollHandler); // <== This DOES NOT work
this._windowHandlersAttached = true;
}
スクロールイベントが機能しないのに、サイズ変更イベントが機能する理由を誰かが説明できますか?私を助けるための提案や代替案はありますか?私はjQueryを使用しているので、MSの$ addHandlerメソッド以外の何かを使用できる場合は問題ありません。ハンドラーを削除するには_detachPopup関数もオーバーライドする必要があるため、それを考慮する必要があることに注意してください。
ありがとう!
解決
Nevermind、quirksモードは再び私を噛みました。 documentElementが存在しなかったため、親からscrollTopの位置を取得できませんでした。切り替えました
$(top.window.document.documentElement).scrollTop();
to
$(top.window.document.body).scrollTop();
私のjQuery拡張機能のセンタリングコードで、これで満足です。