用JS获取地址栏参数的方法

JavaScript017

用JS获取地址栏参数的方法,第1张

用JS获取地址栏参数的方法:

方法一：采用正则表达式获取地址栏参数

方法二：原生js多次截取方法

推荐方法1，方便实用！

获取地址栏参数值

http://www.xxx.com/index.html?ver=1.0&id=6#page1

getQueryVariable(ver)// 1.0

getQueryVariable(id) // 6

我们可以用javascript获得其中的各个部分

1、整个URl字符串(在浏览器中就是完整的地址栏 http://www.xxx.com/index.html?ver=1.0&id=6#page1 )

本例返回值: ( http://www.xxx.com/index.html?ver=1.0&id=6#page1 )

2、URL 的协议部分 ( http://www.xxx.com/index.html?ver=1.0&id=6#page1 )

本例返回值:http:

3、URL 的主机部分 ( http://www.xxx.com/index.html?ver=1.0&id=6#page1 )

本例返回值: www.xxx.com

4、URL 的端口部分 ( http:192.168.1.152:8080/index.html)

如果采用默认的80端口(update:即使添加了:80)，那么返回值并不是默认的80而是空字符

本例返回值:"8080"

5、URL 的路径部分( http://192.168.1.145/community/page/index.html?categoryId=#page3 )

本例返回值:/community/page/index.html

6、查询(参数)部分

除了给动态语言赋值以外，我们同样可以给静态页面,并使用javascript来获得相信应的参数值

本例返回值:?ver=1.0&id=6

7、锚点 ( http://192.168.1.145/community/page/index.html?categoryId=#page3 )

本例返回值:#page3

给你提供一个通用的函数

var getSearch = function( url , name ){

if( !name ){

name = url

url = location.href

}

var rv = ''

url = url.indexOf('?') > -1 ? url.split('?')[1] : ''

if(url != ''){

var ls = url.split('&')

for(var i=0i<ls.lengthi++){

var ele = ls[i]

var kname = ele.split('=')[0] ||'',kvalue = ele.split('=')[1] || ''

if(kname === name){

rv = kvalue

break

}

}

}

return decodeURIComponent(rv)

}

//调用的时候就可以通过getSearch直接获得

//比如获得url中的name

function f1(){

var name = getSearch('name')

document.getElementById("d1").value=name

}