背景
知人から、サイトURLの移転に伴いとあるサイトで全ページに共通なタグを埋め込んで指定された別のサイトへ個別にリダイレクトするようなものがほしいと言われて作りました。
JQueryとかも使えないようなサイトだったので、JQueryが無くてもそれなりに動くようにしました。
こだわったポイント
- リダイレクト中に移転前のページが見えないようにした
- 流入経路がリダイレクト先でも解るように、リクエストパラメータとリファラを引き継ぐ
実装
以下実施（jsを個別にRailsで読み込むため。Railsでなければ不要）
以下追記
config/environments/production.rb
config.assets.precompile += ['*.js']
以下削除
app/assets/javascripts/application.js
//= require_tree .
redirectするjs
この例ではRailsにjsを入れたのでディレクトリ構造がこのようになってます
app/assets/javascripts/redirect.js
// bodyが読み込まれる前にタグを埋め込まれた場合、こだわったポイント1は実現できません
if ( document.body === void 0 || document.body === null ){
}
// こだわったポイント１
else if ( document.body != null ){
document.body.style = 'visibility:hidden'
}
window.onload = function() {
try {
// この例は https://~~~.com/1.html とかを 指定した遷移先1のURL へリダイレクトします
var url_map = { 1:'遷移先1のURL', 2:'遷移先2のURL'}
// 1.html だったら 1 にします。拡張子を消す処理
var keys = location.pathname.match(/.*[/](.*?)$/);
var key = keys[keys.length-1].replace(/\.[^/.]+$/, "");
if( url_map[key] === void 0){
document.body.style = 'visible'
throw new Error('end');
}
// クエリパラメータとreferrerを引き継ぐ（こだわったポイント２）
var redirect_url = url_map[key] + location.search;
if (document.referrer) {
var referrer = "referrer=" + encodeURIComponent(document.referrer);
redirect_url = redirect_url + (location.search ? '&' : '?') + referrer;
}
location.href = redirect_url;
}catch (e) {
}
}
埋め込むタグ(Railsでerbの場合)
<%= javascript_include_tag 'redirect.js' %>
埋め込むタグ(普通のHTMLの場合)
指定ディレクトリはjs格納先に依存します
<script src="/assets/redirect.js"></script>
注意
こだわったポイント１の実現の為にも <script>~</script> は <body>の直後に記載するとよい。
参考にさせて頂いたページ
https://qiita.com/aqril_1132/items/9b5e5787e46d8ba13b03
https://qiita.com/Oakbow/items/2e712e05bb4bbf68faf5