web-dev-qa-db-ja.com

現在のURLにパラメーターを追加します

プロジェクトサイトの隅に小さなイースターエッグボタンがあります。クリックすると、文字列が現在のURLにドロップされ、ページがリロードされます。

私がいる場合： http://test.com/projects/view/134

ボタンをクリックします

ページの再読み込み： http://test.com/projects/view/134?ts=true

しかし、どうやってそうするのかはよくわかりません。

javascriptjqueryappend
21
Fuego DeBassi

このコードを試して、

var separator = (window.location.href.indexOf("?")===-1)?"?":"&";
window.location.href = window.location.href + separator + "ts=true";

編集：URLの重複したパラメーターまたは非常に大きな文字列を回避するには、既存の古いパラメーターを置き換える必要があります。

var url=window.location.href,
    separator = (url.indexOf("?")===-1)?"?":"&",
    newParam=separator + "ts=true";
    newUrl=url.replace(newParam,"");
    newUrl+=newParam;
    window.location.href =newUrl;
27
Chamika Sandamal

location.href に現在の値と新しいクエリ文字列を割り当てることができます。

（既存のクエリ文字列にわかりやすいように編集）

$("#yourButtonId").click({
    var loc = location.href;
    if (loc.indexOf("?") === -1)
       loc += "?";
    else
       loc += "&";
    location.href = loc + "ts=true";
});

または、より簡潔にするために：

$("#yourButtonId").click({
    var loc = location.href;        
    loc += loc.indexOf("?") === -1 ? "?" : "&";

    location.href = loc + "ts=true";
});
24
Adam Rackis

を使用して：

例：

var url = new URL("http://foo.bar/?x=1&y=2");

// If your expected result is "http://foo.bar/?x=1&y=2&x=42"
url.searchParams.append('x', 42);

// If your expected result is "http://foo.bar/?x=42&y=2"
url.searchParams.set('x', 42);

// Build result
url.toString();
6
Vianney Bajart

location DOM APIを最大限に活用し、ハッシュでカウントします。

location.protocol + '//' + location.pathname + 
    (location.search ? location.search + '&a=b' : '?a=b') +
    location.hash;
4
harttle
location.href += '?ts=true';

そのように。

3
Ohas

私は以前の答えが不足していることを発見したので、ここでは現在のクエリ文字列の他のパラメータをより適切に処理するメソッドです

_appendToQueryString = function (param, val) {
    var queryString = window.location.search.replace("?", "");
    var parameterListRaw = queryString == "" ? [] : queryString.split("&");
    var parameterList = {};
    for (var i = 0; i < parameterListRaw.length; i++) {
        var parameter = parameterListRaw[i].split("=");
        parameterList[parameter[0]] = parameter[1];
    }
    parameterList[param] = val;

    var newQueryString = "?";
    for (var item in parameterList) {
        if (parameterList.hasOwnProperty(item)) {
            newQueryString += item + "=" + parameterList[item] + "&";
        }
    }
    newQueryString = newQueryString.replace(/&$/, "");
    return location.Origin + location.pathname + newQueryString;
}
_

実際にページをリロードするには、location.href = appendToQueryString(ts, true)を使用する必要があります。

3
Bobbzorzen

URLにハッシュ「＃」が存在する可能性を考慮する場合は、次の手順を実行します。

var href = location.href;
var hasQuery = href.indexOf("?") + 1;
var hasHash = href.indexOf("#") + 1;
var appendix = (hasQuery ? "&" : "?") + "ts=true";
location.href = hasHash ? href.replace("#", appendix + "#") : href + appendix;
2
fabiangebert

もしかして：


$(document).ready(function() {
    $("#yourButtonId").click(function() {
       var currentUrl = window.location.pathname + "?ts=true";
    });
});
2
Sudhir Bastakoti

履歴APIのドキュメントを参照してください。

https://developer.mozilla.org/en-US/docs/Web/API/History_API

使用例：

var obj = { Title: title, Url: url }; history.pushState(obj, obj.Title, obj.Url);

1
Babacar Diop

名前のみを渡すことでparamを削除する機能を備えた@Bobbzorzenの回答からの改善：

function AlterQueryString(param, val) {
    var queryString = window.location.search.replace("?", "");
    var parameterListRaw = queryString == "" ? [] : queryString.split("&");
    var parameterList = {};
    for (var i = 0; i < parameterListRaw.length; i++) {
        var parameter = parameterListRaw[i].split("=");
        if (typeof val != 'undefined') {
            parameterList[parameter[0]] = parameter[1];
        } else if (param != parameter[0]) {
            parameterList[parameter[0]] = parameter[1];
        }
    }
    if (typeof val != 'undefined') {
        parameterList[param] = val;
    }

    var newQueryString = Object.keys(parameterList).length > 0 ? "?" : "";
    for (var item in parameterList) {
        if (parameterList.hasOwnProperty(item)) {
            newQueryString += item + "=" + parameterList[item] + "&";
        }
    }
    newQueryString = newQueryString.replace(/&$/, "");
    return location.Origin + location.pathname + newQueryString;
}

要旨：https://Gist.github.com/envil/bc1832503bef55ffdabb0cde32bb06f1

0
Envil