从事web开发,总是缺少不了页面之间的交互,在这个过程中核心是页面 url 参数的传递。那要怎样获取页面中 url 具体的参数呢?
首先我们先要了解一下 url 的组成,以 http://www.jianshu.com/c/bd38bd199ec6?utm_medium=index-collections&utm_source=desktop#name 为例说明。
·protocol 协议:通常是http 协议,本例子显示为:“http”;
·host 主机地址:可以是地址,也可以是ip 地址,本例子显示为:“www.jianshu.com”;
·port 端口:http 默认端口是:80端口,本例子显示为:80端口;
·pathname 路径:网络资源在服务器中的指定路径,本例子显示:“/c/bd38bd199ec6”;
·search参数:一般是“?”字符后的字符串,本例子显示为:“?utm_medium=index-collections&utm_source=desktop”;
·hash 锚点:一般是“#”后的字符串,指网页中的片段,设置锚点可以直接到达页面指定的位置,本例子显示为:“#name”。
下面我们来展示一下获取页面 url 具体参数的方法:
1、设置或获取整个url: window.location.href
var test = window.location.href;
alert(test); // http://www.jianshu.com/c/bd38bd199ec6?utm_medium=index-collections&utm_source=desktop#name
2、设置或获取 url 的 protocol 协议部分:window.location.protocol
var test = window.location.protocol;
alert(test); // http
3、设置或获取 url 的主机名:window.location.host
var test = window.location.post;
alert(test); // www.jianshu.com
4、设置或获取 url 的端口:window.location.port
var test = window.location.port;
alert(test); //空字符(如果采用默认的80端口(update:即使添加了:80),那么返回值并不是默认的80而是空字符)
5、设置或获取 url 的路径:window.location.pathname
var test = window.location.pathname;
alert(test); // /c/bd38bd199ec6
6、设置或获取 url 的参数:window.location.search
var test = window.location.search;
alert(test); // ?utm_medium=index-collections&utm_source=desktop
7、设置或获取 页面的锚点:window.location.hash
var test = window.location.hash;
alert(test); // #name
8、JavaScript 获取 url 中的参数
(1)、正则方法
function getQueryString(name) {
var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i'); //设置正则匹配规范
var r = window.location.search.substr(1).match(reg); // 获取“?”后的字符串并正则匹配
if (r != null) {
return decodeURIComponent(r[2]); // 解码参数部分
}
return null;
}
(2)、split拆分法
function getRequest() {
var url = window.location.search;
var theRequest = new Object();
if(url.indexof != -1) { //判断是否有参数
var str = url.substr(1); //从第一个字符开始 因为第0个是?号 获取所有除问号的所有符串
strs = str.split("&"); //截除“&”生成一个数组
var i = 0, len = strs.length;
for(i = 0; i < len; i++) {
theRequest[strs[i].split("=")[0]] = decodeURIComponent(strs[i].split("=")[1]);
}
}
console.log(theRequest);
}
getRequest(); // {utm_medium: "index-collections", utm_source: "desktop"}
(3)获取指定参数的值
function getQueryString(name) {
var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
var r = window.location.search.substr(1).match(reg);
var context = '';
if (r != null) {
context = r[2];
}
reg = null;
r = null;
return context == null || context == "" || context == "undefined" ? "" : context;
}
getQueryString("utm_medium"); // "index-collections"
(4)、单个参数的获取
function GetRequest() {
var url = location.search;
if (url.indexOf("?") != -1) {
var str = url.substr(1);
strs = str.split("=");
console.log(strs[1]);
}
}
GetRequest(); // index-collections&utm_source