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

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

iframe1
左記のように親HTMLを下段までスクロールさせた状態でiframe内のリンクをクリックすると・・・
iframe2
当然ですが親HTMLのスクロール位置は変わらず、iframeのスクロール位置は最上段に戻ります。
このときに親HTMLも最上段までスクロールを戻したいというわけです。

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

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


実際の動作例はこのようになります

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

AD

Share

Commentsコメント

メールアドレスは公開されません。コメントは必ずご入力ください。

HTMLタグは使用できません。ソースコードを書き込みたい場合はCodetterGistCodePenなどのご利用が便利です。

コメントはまだありません。