食べあるきや面白いweb情報が好きな鳩ポッポ

よくあるスマートフォンとPCの切り替えボタンの実装方法

こんにちは。小太りな鳩です。
今回はjavascriptによって、よくあるPCとスマホサイトの切り替えボタンの実装を行ったので記載していきたいと思います。
今回やりたいこととしては、/sp/、/pc/ などディレクトリは分かれているが、その配下の構造は同じ場合に自動的にそこに飛ばすようにするスクリプトです。
また、相対するファイルが無かった場合は、aタグに記載しているリンクに飛ばすような形にしていきたいと思います。

※jQuery1.7.1以上が必要となります。

HTML

<a href="/index.html" id="#btn_pc">変換ボタン</a>

 

JavaScript

$(function(){
	var urlChange = window.location.pathname.replace('/pc/', '/sp/'); //changeUrlの変数locationで取得した現在のディレクトリ名を置換したものを入れる。
	$("#btn_pc").click(function(e){ //dtn_pcのIDが付いている要素をクリックした時に動作。
		e.preventDefault();
		var urlDefault = $(this).attr('href'); //urlDefaultの変数に#btn_pcのhrefに入っている値を格納
		$.ajax({
			type: 'post',
			url: urlChange,
			statusCode: { //ajaxでのステータスコードを擬似取得。相対するファイルが有るかどうかを判断する。
				200: function(){ //200(ファイルがある場合)はurlChangeに入っているURLにリダイレクト
					location.href = urlChange;
				},
				404: function(){ //404(ファイルがない場合)はurlDefaultに入っているURLにリダイレクト(aタグのhrefに飛ばす)
					location.href = urlDefault;
				}
			}
		});
	});
});

ajaxを使い、擬似的に相対するファイルにアクセスしステータスコードによって何方に飛ばすかを判断しています。
もうちょっとスマートな書き方あるかもだけど、一応こんなかんじで。

関連記事

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。