iframe内でページ遷移した時にjqueryを使って親ページのトップへ戻す方法

   

前回の記事、違うドメイン同士（クロスドメイン）でjqueryを使ってiframeの高さを自動取得する の時、メールフォームの確認画面やエラー画面の出し方がページを切り替える方式のためにiframe内を何回もページ遷移がありました。

iframe内でページ遷移をすると親ページはそのままなので、中身のすっごく下の方が表示されるんですね。
まるで同じページのように見せたい！というのがコンセプトなのでそれを実現するためにiframe内で遷移があったらページのトップへ戻るようにしました。
これもメモしときましょう。

前回のコード、iframeで読み込む側（親）

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>iframe 自動で高さを取得するテストドキュメント（親）</title>
</head>

<body>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(function()
{

// メッセージを受信したとき
$(window).on('message', function(event)
{
  // クロスサイトリクエストフォージェリ対策（送信元の検証）
  if (event.originalEvent.origin != 'http://読み込まれるサイト.com') return;
  
  // 受信した高さをiframeに設定
  $('.child-iframe').css(
  {
    'width': '100%',
    'height': event.originalEvent.data
  });
});


});

//ページ遷移時に親のトップ位置に戻すために追加
(function($){
	$(function(){
		var obj = $('#iframe');
		
		obj.on('load',function(){
			$(window).scrollTop(0);//0を変えるとトップから指定した位置にスクロール
		});
	});
})(jQuery);
//ページ遷移時に親のトップ位置に戻すために追加 ここまで
</script>

<iframe id="iframe" class="child-iframe" src="http://読み込まれるサイト.com/iframe.html"></iframe>
<!-- 前回のコードにidを追加 -->

</body>
</html>

以上、これにて完成しました(*ﾟ▽ﾟﾉﾉﾞ☆ﾊﾟﾁﾊﾟﾁ

参考にさせていただきました。ありがとうございますm(_ _)m
別ドメインのiframe内リンクをクリックされた時に親HTMLのスクロールを制御する方法

Related Posts

 - html, jquery