jQueryでiframe内から親ページをリダイレクトさせる

プロモーションが含まれています

jQueryでiframe内から親ページをリダイレクトする

楽天での話、楽天のデフォルトTOPページやカテゴリページなどのJavaScriptが使えないページからリダイレクトさせる方法。(楽天GOLD必須)

jQuery関連記事

関連記事をもっとみる

通常のリダイレクト処理

JavaScript

window.location.href = 'https://mugenweb-note.com/web/';

iframe内からリダイレクトさせる

JavaScript

if ((navigator.userAgent.indexOf('iPhone') > 0 && navigator.userAgent.indexOf('iPad') == -1) || navigator.userAgent.indexOf('iPod') > 0 || navigator.userAgent.indexOf('Android') > 0) {
	// SP用のページにリダイレクトする
	parent.location.href = 'http://www.rakuten.ne.jp/gold/sample/sp/index.html';
}else{
	// PC用のページにリダイレクトする
	parent.location.href = 'http://www.rakuten.ne.jp/gold/sample/index.html';
}

上のlocation.href = ‘xxx’;でxxxに移動します!って記述なんだけど、iframeの中に書くとiframeの中だけがxxxに移動してしまいます。
iframe内のリンクにtarget属性で指定するような感じでparent.location.href = ‘xxx’;にするとiframeを読み込んでいる親のページごと移動してくれます。
今回の場合は、アクセスした端末を調べてスマホだったらスマホサイト、PCだったらPCサイトにリダイレクトするようにしています。

jsを有効にしてないなどでリダイレクトされない場合のために、htmlでも「リニューアルしました!」みたいな感じでリンクを教えてあげると親切ですね!
iframeのサイズ指定も忘れずにね!

楽天GOLDから楽天GOLDへのリダイレクト方法

JavaScript

if ((navigator.userAgent.indexOf('iPhone') > 0 && navigator.userAgent.indexOf('iPad') == -1) || navigator.userAgent.indexOf('iPod') > 0 || navigator.userAgent.indexOf('Android') > 0) {
	// SP用のページにリダイレクトする
	location.href = 'http://www.rakuten.ne.jp/gold/sample/sp/index.html';
}else{
	// PC用のページにリダイレクトする
	location.href = 'http://www.rakuten.ne.jp/gold/sample/index.html';
}

上で説明したとおりparent.location.hreflocation.hrefにするだけでできます!
どの処理よりも早く処理してほしいのでheadのなるべく上の方に書くようにします。上の例だと、先に楽天の基本部分を読み込んでからリダイレクトするのでちらっと元のページが見えちゃいます!

ちら見えを回避しようと思い、調べたところ、デフォルトのトップページからGOLDのindex.htmlへリダイレクトする方法がRMS上で設定できます。
旧R-Storefront → 2 説明文 画面上でリダイレクト設定します。
その後、新RMS1-2 デザイン設定 → トップページ設定このページを表示するを選択すれば反映されます。
ですが、処理速度は変わらずに、ちらっと元のページが見えてしまう上に、RMSから旧R-Storefrontに行こうとすると表面のトップページにリダイレクトされてしまう謎の現象が起こります!

コールセンターに確認すると「そういう仕様」らしい。

旧R-Storefrontからのリダイレクト回避方法は「エスケープキー連打!」

それで入れるようになるので設定を元に戻す。速度も変わらず余計な仕様が出るくらいならiframeからのリダイレクトでよさそうですね。

コメント

タイトルとURLをコピーしました