今回はWEB制作でよくあるテスト環境と本番環境のURL切り替えを、ブックマークレットで実装したのでメモしときます。
※動作確認はChromeのみです。
URLの組み合わせごとに関数を実行するバージョン
テスト環境と本番環境で切り替えるURLを引数に指定します。
複数のサイトを運営している場合は、引数を変更して複数の関数を実行します。
実行するページで、切り替え対象のURLがなければアラートを表示します。
アラート表示は、変数(urlFlag )のフラグをfalseからtrueに変更することで判定します。
var area = location.href; //現在のURLを取得 var urlFlag = false; //変換するURLがあるか判定 function changeUrl(testUrl, honbanUrl) { //テストURLがあれば本番に置換、またはその逆 if(document.location.href.indexOf(testUrl)>0){ area=document.location.href.replace(testUrl,honbanUrl); urlFlag = true; //URLを置換したらフラグを更新 window.open(area); } else if(document.location.href.indexOf(honbanUrl)>0){ area=document.location.href.replace(honbanUrl,testUrl); urlFlag = true; //URLを置換したらフラグを更新 window.open(area); } } //関数実行 changeUrl('www-test.example.com','www.example'); changeUrl('XXX.XXX.X.XXX','www.test.jp'); //変換するURLがなければアラートを出す if(urlFlag === false) { alert('このURLには対応していません!') }
コードに改行が含まれているとうまく動作しません。
手作業ですべての改行を削除するのは大変なので、ブックマークレットのコードに変換できるサイトを利用します。
いつもお世話になっているサイトはこちら。
Bookmarklet スクリプト変換
※コメントが入っているとうまく変換されない可能性があるので、削除して変換します。
URLを配列に格納したバージョン(追記)
urlを配列に格納したバージョンも作成。先ほどのURLごとに関数を実行するよりもスマートかもしれない。。
var urls = [
['www-st.example', 'www.example'],
['http://test.jp/example-jp/', 'https://example.jp/'],
['example.jp', '203.0.113.0']
];
var area = location.href;
var flag = false;
urls.forEach(function (url) {
if (area.indexOf(url[0]) > 0) {
area = area.replace(url[0], url[1]);
window.open(area);
flag = true;
} else if (area.indexOf(url[1]) > 0) {
area = area.replace(url[1], url[0]);
window.open(area);
flag = true;
}
});
if (!flag) {
alert('このURLでは使えません')
}
コメント