Categories: JavaScriptJQuery

JavaScript URLのパラメータを取得、設定する

JQueryで、URLにパラメータを追加する必要があったので、パラメータを取得、設定する関数を用意しました。

下記例では、class=”addPrm” の要素をクリックすると、name=tanaka&age=54というパラメータをURLに付加して遷移する、という感じです。

$( '.addPrm' ).on( 'click', function(){
        var params = getParameter();
        params['name'] = 'tanaka';
        params['age'] = 54;
        window.location.href = setParameter(params);
    });
 
    //パラメータを設定したURLを返す
    function setParameter( paramsArray ) {
        var resurl = location.href.replace(/?.*$/,"");
        for ( key in paramsArray ) {
            resurl += (resurl.indexOf('?') == -1) ? '?':'&';
            resurl += key + '=' + paramsArray[key];
        }
        return resurl;
    }
 
    //パラメータを取得する
    function getParameter(){
	var paramsArray = [];
	var url = location.href; 
	parameters = url.split("#");
	if( parameters.length > 1 ) {
		url = parameters[0];
	}
	parameters = url.split("?");
	if( parameters.length > 1 ) {
		var params	 = parameters[1].split("&");
		for ( i = 0; i 

getParameter() で現在のページのURLパラメータを取得します。

setParameter() で任意のパラメータ(例ではnameとage)を追加したURLを返します。

参考になったサイト:http://moriroom.my.coocan.jp/site1/?p=1581

追記:2016/02/16
パラメータのあとに#が付いている場合に対応するように、getParameter()を修正

nakaike

Share
Published by
nakaike