【Javascript】別ドメインのiframe内リンクをクリックされた時に親HTMLのスクロールを制御する方法

別ドメインのページをiframeで設置した際、親HTMLのスクロール位置を操作したいという状況に遭遇しました。iframeを使って宿泊予約や物件検索などのASPを設置した場合を想像してみてください。

左記のように親HTMLを下段までスクロールさせた状態でiframe内のリンクをクリックすると・・・

当然ですが親HTMLのスクロール位置は変わらず、iframeのスクロール位置は最上段に戻ります。
このときに親HTMLも最上段までスクロールを戻したいというわけです。

同一ドメインであればiframe内のHTMLからwindow.parent….で操作できそうです。が、iframe内は手をいれることができない場合はどうすればいいのか。

悩みましたが解決策は簡単で、iframeのloadイベントに対してwindowのスクロール位置を制御するだけでした。iframe内のページ遷移時には、そのiframe自体のloadイベントが発火するようです。

(function($){

$(function(){

var obj = $('#iframe');

obj.on('load',function(){

$(window).scrollTop(0);

});

})(jQuery);

実際の動作例はこのようになります。
親HTMLを下段までスクロールさせて、iframe内(Yahoo!を突っ込んでます）のリンクをクリックしてみてください。iframe内ページのload後に実行されるのでタイムラグがありますが、今後の課題ということで。。。

ADs

【Javascript】別ドメインのiframe内リンクをクリックされた時に親HTMLのスクロールを制御する方法 | Wood-Roots:blog