Select选中后改变url参数并自动跳转

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
//value值不为空时,存在参数则更新,否则不操作
function updateQueryStringParameter(uri, key, value) {
if(!value) {
return uri;
}
var re = new RegExp("([?&])" + key + "=.*?(&|$)", "i");
var separator = uri.indexOf('?') !== -1 ? "&" : "?";
if (uri.match(re)) {
return uri.replace(re, '$1' + key + "=" + value + '$2');
}
else {
return uri + separator + key + "=" + value;
}
}
var url = 'http://www.example.html';
url = updateQueryStringParameter(url, 'a', '1');
console.log(url);
url = updateQueryStringParameter(url, 'b', '2');
console.log(url);
url = updateQueryStringParameter(url, 'a', '');
console.log(url);
url = updateQueryStringParameter(url, 'c', '1111');
console.log(url);
url = updateQueryStringParameter(url, 'd', '222');
console.log(url);

跳转

1
2
3
<select id="selectcountry" class="" style="width:200px;" onchange='window.location.href=updateQueryStringParameter(url,"local",this.value)'>
<option>All</option>
</select>
1
2
var nUrl = updateQueryStringParameter(url, 'a', '1');
window.location.href = nUrl

输出

1
2
3
4
5
http://www.example.html?a=1
http://www.example.html?a=1&b=2
http://www.example.html?a=1&b=2
http://www.example.html?a=1&b=2&c=1111
http://www.example.html?a=1&b=2&c=1111&d=222

JS是如何修改url中参数的?

[新的方法] 不需要URL中提前有次参数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
function changeURLArg(arg,arg_val){
var url= this.location.href.toString();
var pattern=arg+'=([^&]*)';
var replaceText=arg+'='+arg_val;
if(url.match(pattern)){
var tmp='/('+ arg+'=)([^&]*)/gi';
tmp=url.replace(eval(tmp),replaceText);
//return tmp;
this.location = tmp;
   window.location.href=tmp
}else{
if(url.match('[\?]')){
tmp = url+'&'+replaceText;
this.location = tmp;
   window.location.href=tmp
}else{
tmp = url+'?'+replaceText;
this.location = tmp;
   window.location.href=tmp
}
}
}

<a href="javascript:void(0)" onclick='changeURLArg("category","<?php echo $category->term_id;?>")'><?php echo $category->name;?></a>

修改url的某个参数值 - 必要条件 当前URL 中有这个参数

1
2
3
4
5
6
7
8
//替换指定传入参数的值,paramName为参数,replaceWith为新值
function replaceParamVal(paramName,replaceWith) {
var oUrl = this.location.href.toString();
var re=eval('/('+ paramName+'=)([^&]*)/gi');
var nUrl = oUrl.replace(re,paramName+'='+replaceWith);
this.location = nUrl;
  window.location.href=nUrl
}
1
<a href="javascript:void(0)" onclick='replaceParamVal("category","<?php echo $category->term_id;?>")'><?php echo $category->name;?></a>

JS是如何读取url中的参数的?

JS读取url的某个参数值

1
2
3
4
5
6
7
8
9
10
11
function GetQueryString(name)
{
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
var r = window.location.search.substr(1).match(reg);
if (r != null) {
return unescape(r[2]);
}
return null;
};

var nameVal=GetQueryString("URL上的参数名");

JS是如何修改P标签内容的innerHTML和innerText

innerHTML

1
2
3
var obj = document.getElementById("p");
alert(obj.innerHTML);
obj.innerHTML= "Zhan5u";

innerText

1
2
3
var obj = document.getElementById("p2");
alert(obj.innerText);
obj.innerText= "站无忧";

JS如何监控浏览器是否切换了标签页?

1
2
3
4
5
6
7
document.addEventListener('visibilitychange',function(){ //浏览器切换事件
if(document.visibilityState=='hidden') { //离开当前tab标签
console.log("离开当前tab标签");
}else {/////回到当前tab标签
console.log("回到当前tab标签");
}
});