2013
04/30

別ドメインの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後に実行されるのでタイムラグがありますが、今後の課題ということで。。。

ADs

Post Comments

メールアドレスが公開されることはありません。

Comments