Internet Explorer 8(IE8)以前のInternet Explorerでlocation.hrefを使いページ遷移をさせると、遷移先のページでdocument.referrerがセットされない現象に遭遇しました。
遷移させるだけの場合は問題無いのですが、document.referrerを判別し振分け条件を作成する場合には大問題となってしまいます。今回はそれを回避するコードをご紹介します。
事象が出るコード
下記コードはlocation.hrefでページ遷移をさせるシンプルなコードの例です。
page1_a.htmlにあるリンク「遷移する!」を押すと、page2.htmlに遷移後、「page1_a.html」を含むリファラーがアラート画面で表示されるのが期待している動きです。もちろんほとんどのブラウザは期待通りの動きをしてくれるのですが、このコードをIE8以下のブラウザで動かした場合にだけリファラーがセットされないという意味の分からない現象がありました。さすがIEですね。
<p><a href="#" id="linkBtn">遷移する!</a></p> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script type="text/javascript"> jQuery(function($){ /* click */ $('#linkBtn').click(function(e){ e.preventDefault(); location.href = '/page2.html'; }); }); </script>
<script type="text/javascript"> alert(document.referrer); </script>
何が問題なのか
いろいろ回避策を探ってみたのですが、IE8以下のブラウザではlocation.href自体が他のブラウザと違う挙動をしているみたいです。どうやっても遷移する際にリファラーがセットされないです。これがその当時のIEの仕様なの・・・かな?
ということで、ブラウザがIE8以下のブラウザだった場合は別処理が動くようなコードを書くことにしました。
※page2.htmlは上記と同じコードなので省略します
<p><a href="#" id="linkBtn">遷移する!</a></p> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script type="text/javascript"> jQuery(function($){ /* click */ $('#linkBtn').click(function(e){ e.preventDefault(); var jumpTo = '/page2.html'; if(ltie9()){ var referLink = document.createElement('a'); referLink.href = jumpTo; document.body.appendChild(referLink); referLink.click(); }else{ location.href = jumpTo; } }); function ltie9(){ var nu = navigator.userAgent; var ptn = new RegExp(/MSIE (\d+.\d+);/); var ltie9 = nu.match(ptn) ? parseInt(nu.match(ptn)[1], 10) < 9 ? true : false : false; return ltie9; } }); </script>
このコードに変更してからは、問題なくリファラーの取得ができます。IE6、IE7、IE8で確認済みです。
コードの変更内容ですが、
IE8以下のブラウザでlocation.hrefを使うとリファラーが残らないので、まずはIE8以下のブラウザとその他のブラウザで分岐処理をさせます。
IE8以下以外だった場合は普通にlocation.hrefで遷移させ、IE8以下のブラウザだった場合は新たなリンクエレメントを作成し、そのリンクエレメントに遷移先のURLをセットし.click()アクションで遷移をさせるというコードです。
その他
最近は使う機会が少なくなってきているFlashですが、FlashのgetURL()でもリファラーが正常に取得できないようです。
参考:IEだとリファラが取得できない場合がある件
困りますね~、IEの変な仕様は。