添加/更改 URL 参数并重定向到新 URL答案

【问题标题】：Add / Change parameter of URL and redirect to the new URL添加/更改 URL 参数并重定向到新 URL
【发布时间】：2012-10-15 08:33:02
【问题描述】：

如果 URL 中不存在 &view-all 参数，我需要将其与值一起添加到 URL 的末尾。如果它确实存在，那么我需要能够在不创建新 URL 的情况下更改值，因为它之前可能有也可能没有其他参数。

我找到了这个功能，但我不能让它工作：https://stackoverflow.com/a/10997390/837705

这是我使用上述函数的代码（我无法工作）：http://jsfiddle.net/Draven/tTPYL/4/

我已经知道如何附加参数和值了：

<div onclick="javascript: window.location.assign(window.location.href+='&view-all=Yes');">Blah Blah</div>

更多信息：

如果 URL 为 http://www.domain.com/index.php?action=my_action，则默认的“&view-all”值为“Yes”，因此当他们单击按钮时将定向到的 URL 为 http://www.domain.com/index.php?action=my_action&view-all=Yes。

如果 URL 是 http://www.domain.com/index.php?action=my_action&view-all=Yes，那么当他们单击按钮时，它将更改为 http://www.domain.com/index.php?action=my_action&view-all=No

编辑：请给我一些例子。我对JS不太了解，只是想不出用PHP做的方法。

【问题讨论】：

我建议使用 PHP 生成正确的 url，这样您就不必弄乱当前位置的 url...
@Marc 你建议我用 PHP 怎么做？我想不出办法。
@Tom 我的 JS 技术很差。可以举个例子吗？
@Draven，阅读您的更新，我认为 Marc 是正确的，使用 php 更容易（和安全）。
Change URL parameters的可能重复

标签： javascript jquery append

【解决方案1】：

function setGetParameter(paramName, paramValue)
{
    var url = window.location.href;
    var hash = location.hash;
    url = url.replace(hash, '');
    if (url.indexOf(paramName + "=") >= 0)
    {
        var prefix = url.substring(0, url.indexOf(paramName + "=")); 
        var suffix = url.substring(url.indexOf(paramName + "="));
        suffix = suffix.substring(suffix.indexOf("=") + 1);
        suffix = (suffix.indexOf("&") >= 0) ? suffix.substring(suffix.indexOf("&")) : "";
        url = prefix + paramName + "=" + paramValue + suffix;
    }
    else
    {
    if (url.indexOf("?") < 0)
        url += "?" + paramName + "=" + paramValue;
    else
        url += "&" + paramName + "=" + paramValue;
    }
    window.location.href = url + hash;
}

在您的 onclick 事件中调用上述函数。

【讨论】：

如果 paramName=paramValue 不在 url 字符串的末尾，则删除 url 字符串的其余部分。示例 ?view=test&page=2&sort=asc 将切换到 ?view=test&page=3 并且排序参数会丢失。否则功能非常好。谢谢。
@Piero 这是因为代码中有错误：下面的行必须重写 var suffix = url.substring(url.indexOf(paramName)).substring(url.indexOf("=" ) + 1);通过两行： var suffix = url.substring(url.indexOf(paramName)); suffix = suffix.substring(suffix.indexOf("=") + 1);
@LajosArpad 我已经编辑了你的帖子，并按照我之前评论中的描述进行了更正。
我修复了一个小错误，其中函数处理 URL 中的 # 错误，并将参数设置在 URL 的末尾，它应该设置在 之前#。我已将新功能放入此 pastebin：pastebin.com/3R96LKZu
我在这段代码中发现了一个错误，如果参数包含在 URL 的另一部分中，它会中断。例如我的参数是 s 和 url 是 localhost/index.php?a=0&s=3 ，上面的代码在尝试替换 s 的值时会中断。修复它 var prefix = url.substring(0, url.indexOf(paramName + "=")); var 后缀 = url.substring(url.indexOf(paramName + "="));

【解决方案2】：

既然可以让浏览器为您解析查询字符串，为什么还要自己解析呢？

function changeQS(key, value) {
    let urlParams = new URLSearchParams(location.search.substr(1));
    urlParams.set(key, value);
    location.search = urlParams.toString();
}

【讨论】：

大多数浏览器也支持这个，应该是公认的答案。
IE 中不支持，这足以让许多开发者不考虑。

【解决方案3】：

var updateQueryStringParameter = function (key, value) {

    var baseUrl = [location.protocol, '//', location.host, location.pathname].join(''),
        urlQueryString = document.location.search,
        newParam = key + '=' + value,
        params = '?' + newParam;

    // If the "search" string exists, then build params from it
    if (urlQueryString) {
        var updateRegex = new RegExp('([\?&])' + key + '[^&]*');
        var removeRegex = new RegExp('([\?&])' + key + '=[^&;]+[&;]?');

        if( typeof value == 'undefined' || value == null || value == '' ) { 
            params = urlQueryString.replace(removeRegex, "$1");
            params = params.replace( /[&;]$/, "" );

        } else if (urlQueryString.match(updateRegex) !== null) { 
            params = urlQueryString.replace(updateRegex, "$1" + newParam);

        } else {
            params = urlQueryString + '&' + newParam;
        }
    }

    // no parameter was set so we don't need the question mark
    params = params == '?' ? '' : params;

    window.history.replaceState({}, "", baseUrl + params);
};

【讨论】：

【解决方案4】：

我需要帮助来调整下面的脚本，或者找到可以在我的 wordpress 网站上使用的脚本，以从转发 url 中获取 url 后缀参数，然后添加到按钮单击 url 以跟踪正确的转发广告身份证。

REASON：参数用于广告跟踪，以找出用户从哪个广告转发，即使用户使用按钮点击从 optin 页面跳到销售页面。

这里要达到的目标： 1. FB 广告指向带有跟踪代码的 optin 页面：https://ownsite.com/optin-page/?tid=fbad1 2. 在 optin-page 有一个带有设置 URL 的按钮，用于转发到销售页面，但如果单击则只有 URL 转发，但缺少参数“?tid=fbad1”。 3. 下面的自动转发脚本（可以正常工作）可以用来改变按钮点击转发，但有一个限制，因为它只抓取“tid”参数而不是utm参数。

因此，应实施一个脚本代码来建立点击按钮（也可以设置它们的样式或使用图像代替），并在点击按钮时转发到不同的销售页面，并从当前的 optin 页面获取后缀参数然后转发到销售页面 https://ownsite.com/sales-page/?tid=fbad1 还包括 UTM 参数

目前，我可以通过使用自动重定向脚本来解决这个问题，但是 A.) 我不想在这个页面上使用自动重定向。更好的是一个事件点击按钮，用于让用户自己点击转发，并包含 URL 参数。 B.) 此脚本中的跟踪 ID 参数仅限于 "?tid=..." 而我也想在按钮单击时跟踪 UTM 代码即从当前页面抓取 URL https://www.optin-page.com/?tid=facebookad1?utm_campaign=blogpost 的参数，然后在按钮上单击抓取参数并添加到按钮集 URL https://www.sales-page.com/?tid=facebookad1?utm_campaign=blogpost

现在请在此处找到下面用于自动重定向和抓取 URL 参数的代码。现在应该更改此代码，以便能够创建一个带有单击事件的按钮，然后将其重定向到转发 URL，如果单击该按钮（如上文所述），则使用当前 URL 的参数抓取。

    <p><!-- Modify this according to your requirement - core script from https://gist.github.com/Joel-James/62d98e8cb3a1b6b05102 and suffix grabbing </p>
    <h3 style="text-align: center;"><span style="color: #ffffff; background-color: #039e00;">►Auto-redirecting after <span id="countdown">35</span> seconds◄</span></h3>
    <p><!-- JavaScript part --><br /><script type="text/javascript">

function findGetParameter(parameterName) {
    var result = null,
        tmp = [];
    location.search
        .substr(1)
        .split("&")
        .forEach(function (item) {
          tmp = item.split("=");
          if (tmp[0] === parameterName) result = decodeURIComponent(tmp[1]);
        });
    return result;
}


    // Total seconds to wait
    var seconds = 45;

    function countdown() {
        seconds = seconds - 1;
        if (seconds < 0) {
            // Chnage your redirection link here
var tid = findGetParameter('tid');
window.location = "https://www.2share.info/ql-cb2/" + '?tid='+tid;
        } else {
            // Update remaining seconds
            document.getElementById("countdown").innerHTML = seconds;
            // Count down using javascript
            window.setTimeout("countdown()", 1000);
        }
    }

    // Run countdown function
    countdown();

</script></p>

【讨论】：

【解决方案5】：

所有先前的解决方案都没有考虑参数中子字符串的可能性。例如http://xyz?ca=1&a=2 不会选择参数 a 而是 ca。这是遍历参数并检查它们的函数。

function setGetParameter(paramName, paramValue)
{
  var url = window.location.href;
  var hash = location.hash;
  url = url.replace(hash, '');
  if (url.indexOf("?") >= 0)
  {
    var params = url.substring(url.indexOf("?") + 1).split("&");
    var paramFound = false;
    params.forEach(function(param, index) {
      var p = param.split("=");
      if (p[0] == paramName) {
        params[index] = paramName + "=" + paramValue;
        paramFound = true;
      } 
    });
    if (!paramFound) params.push(paramName + "=" + paramValue);
    url = url.substring(0, url.indexOf("?")+1) + params.join("&");
  }
  else
    url += "?" + paramName + "=" + paramValue;
  window.location.href = url + hash;
}

【讨论】：

这是因为所有其他解决方案都会导致重定向。我可以更改参数值并留在该页面上吗？
当然你可以将 URL 存储在变量中并在不重定向的情况下更改它。

【解决方案6】：

这是我用 JS 重建 url 查询字符串的示例代码

//function get current parameters
$.urlParam = function(name){
    var results = new RegExp('[\?&]' + name + '=([^&#]*)').exec(window.location.href);
    if (results==null){
        return null;
    }
    else{
        return results[1] || 0;
    }
};

//build a new parameters
var param1 = $.urlParam('param1');
var param2 = $.urlParam('param2');

//check and create an array to save parameters
var params = {};
    if (param1 != null) {
        params['param1'] = param1;
    }
    if (order != null) {
        params['param2'] = param2;
    }

//build a new url with new parameters using jQuery param
window.location.href =  window.location.origin + window.location.pathname + '?' + $.param(params);

我使用 JQUERY 参数：http://api.jquery.com/jquery.param/ 创建了一个带有新参数的新 url。

【讨论】：

【解决方案7】：

我建议对@Lajos 的回答稍作改动...在我的特殊情况下，我可能会将哈希作为 url 的一部分，这将导致解析我们在重定向。

function setGetParameter(paramName, paramValue) {
    var url = window.location.href.replace(window.location.hash, '');
    if (url.indexOf(paramName + "=") >= 0) {
        var prefix = url.substring(0, url.indexOf(paramName));
        var suffix = url.substring(url.indexOf(paramName));
        suffix = suffix.substring(suffix.indexOf("=") + 1);
        suffix = (suffix.indexOf("&") >= 0) ? suffix.substring(suffix.indexOf("&")) : "";
        url = prefix + paramName + "=" + paramValue + suffix;
    }else {
        if (url.indexOf("?") < 0)
            url += "?" + paramName + "=" + paramValue;
        else
            url += "&" + paramName + "=" + paramValue;
    }
    url += window.location.hash;
    window.location.href = url;
}

【讨论】：

【解决方案8】：

我认为这样的事情会起作用，升级@Marc 代码：

//view-all parameter does NOT exist  
$params = $_GET;  
if(!isset($_GET['view-all'])){  
  //Adding view-all parameter  
  $params['view-all'] = 'Yes';  
}  
else{  
  //view-all parameter does exist!  
  $params['view-all'] = ($params['view-all'] == 'Yes' ? 'No' : 'Yes');  
}
$new_url = $_SERVER['PHP_SELF'].'?'.http_build_query($params);

【讨论】：

【解决方案9】：

我遇到了类似的情况，我想替换 URL 查询参数。但是，我只有一个参数，我可以简单地替换它：

window.location.search = '?filter=' + my_filter_value

location.search property 允许您获取或设置 URL 的查询部分。

【讨论】：

【解决方案10】：

这是实现此目的的一种方法。它采用参数名称和参数值，以及可选的“清除”。如果您提供 clear=true，它将删除所有其他参数并只保留新添加的参数 - 在其他情况下，它将用新参数替换原始参数，或者如果查询字符串中不存在则添加它。

这是从最初的最佳答案修改的，因为如果它替换了除最后一个值之外的任何内容，则该答案会损坏。这适用于任何值，并保留现有顺序。

function setGetParameter(paramName, paramValue, clear)
{
clear = typeof clear !== 'undefined' ? clear : false;
var url = window.location.href;
var queryString = location.search.substring(1); 
var newQueryString = "";
if (clear)
{
    newQueryString = paramName + "=" + paramValue;
}
else if (url.indexOf(paramName + "=") >= 0)
{
    var decode = function (s) { return decodeURIComponent(s.replace(/\+/g, " ")); };
    var keyValues = queryString.split('&'); 
    for(var i in keyValues) { 
        var key = keyValues[i].split('=');
        if (key.length > 1) {
            if(newQueryString.length > 0) {newQueryString += "&";}
            if(decode(key[0]) == paramName)
            {
                newQueryString += key[0] + "=" + encodeURIComponent(paramValue);;
            }
            else
            {
                newQueryString += key[0] + "=" + key[1];
            }
        }
    } 
}
else
{
    if (url.indexOf("?") < 0)
        newQueryString = "?" + paramName + "=" + paramValue;
    else
        newQueryString = queryString + "&" + paramName + "=" + paramValue;
}
window.location.href = window.location.href.split('?')[0] + "?" + newQueryString;
}

【讨论】：

【解决方案11】：

虽然我从输入中获取 url，但它很容易调整为真实的 url。

var value = 0;

$('#check').click(function()
{
    var originalURL = $('#test').val();
    var exists = originalURL.indexOf('&view-all');

    if(exists === -1)
    {
        $('#test').val(originalURL + '&view-all=value' + value++);
    }
    else
    {
        $('#test').val(originalURL.substr(0, exists + 15) + value++);
    }
});

http://jsfiddle.net/8YPh9/31/

【讨论】：

【解决方案12】：

一些简单的想法让你开始：

在 PHP 中你可以这样做：

if (!array_key_exists(explode('=', explode('&', $_GET))) {
  /* add the view-all bit here */
}

在javascript中：

if(!location.search.match(/view\-all=/)) {
  location.href = location.href + '&view-all=Yes';
}

【讨论】：

【解决方案13】：

在 PHP 中执行此操作：您有几个参数来查看您的页面，比如说 action 和 view-all。您将（可能）已经使用$action = $_GET['action'] 或其他方式访问这些，可能设置一个默认值。

然后你决定是否要切换像$viewAll = $viewAll == 'Yes' ? 'No' : 'Yes' 这样的变量。

最后，您只需再次使用这些值构建 url，例如

$clickUrl = $_SERVER['PHP_SELF'] . '?action=' . $action . '&view-all=' . $viewAll;

就是这样。

所以你依赖于页面状态而不是用户 url（因为也许你稍后会决定 $viewAll 是默认值或其他）。

【讨论】：

如果action 后面有更多参数，我看不出它会如何工作。 URL 可能是http://www.domain.com/index.php?action=my_action&folder=1&view-all=Yes
当然，您需要所有这些，但无论如何您在 PHP 中都有它们来显示您的页面？