在WEB开发中,时常会用到javascript来获取当前页面的url网址信息,在这里是我的一些获取url信息的小总结。
下面我们举例一个URL,然后获得它的各个组成部分:http://i.cnblogs.com/EditPosts.aspx?opt=1
1、window.location.href(设置或获取整个 URL 为字符串)
```
var test = window.location.href;
alert(test);
```
返回:http://i.cnblogs.com/EditPosts.aspx?opt=1
2、window.location.protocol(设置或获取 URL 的协议部分)
```
var test = window.location.protocol;
alert(test);
返回:http:
```
3、window.location.host(设置或获取 URL 的主机部分)
```
var test = window.location.host;
alert(test);
返回:i.cnblogs.com
```
4、window.location.port(设置或获取与 URL 关联的端口号码)
```
var test = window.location.port;
alert(test);
返回:空字符(如果采用默认的80端口(update:即使添加了:80),那么返回值并不是默认的80而是空字符)
```
5、window.location.pathname(设置或获取与 URL 的路径部分(就是文件地址))
```
var test = window.location.pathname;
alert(test);
返回:/EditPosts.aspx
```
6、window.location.search(设置或获取 href 属性中跟在问号后面的部分)
```
var test = window.location.search;
alert(test);
返回:?opt=1
```
PS:获得查询(参数)部分,除了给动态语言赋值以外,我们同样可以给静态页面,并使用javascript来获得相信应的参数值。
7、window.location.hash(设置或获取 href 属性中在井号“#”后面的分段)
```
var test = window.location.hash;
alert(test);
返回:空字符(因为url中没有)
```
8、js获取url中的参数值
一、正则法
```
function getQueryString(name) {
var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i'); var r = window.location.search.substr(1).match(reg); if (r != null) { return unescape(r[2]); } return null;}// 这样调用:alert(GetQueryString("参数名1")); alert(GetQueryString("参数名2")); alert(GetQueryString("参数名3"));
```
二、split拆分法
function GetRequest() { var url = location.search; //获取url中"?"符后的字串 var theRequest = new Object(); if (url.indexOf("?") != -1) { var str = url.substr(1); strs = str.split("&"); for(var i = 0; i < strs.length; i ++) { theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]); } } return theRequest;}var Request = new Object();Request = GetRequest();
// var id=Request["id"]; // var 参数1,参数2,参数3,参数N;// 参数1 = Request['参数1'];// 参数2 = Request['参数2'];// 参数3 = Request['参数3'];// 参数N = Request['参数N'];
三、指定取
比如说一个url:http://i.cnblogs.com/?j=js,我们想得到参数j的值,可以通过以下函数调用。
function GetQueryString(name) { var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i"); var r = window.location.search.substr(1).match(reg); //获取url中"?"符后的字符串并正则匹配 var context = ""; if (r != null) context = r[2]; reg = null; r = null; return context == null || context == "" || context == "undefined" ? "" : context; }alert(GetQueryString("j"));
四、单个参数的获取方法
function GetRequest() { var url = location.search; //获取url中"?"符后的字串 if (url.indexOf("?") != -1) { //判断是否有参数 var str = url.substr(1); //从第一个字符开始 因为第0个是?号 获取所有除问号的所有符串 strs = str.split("="); //用等号进行分隔 (因为知道只有一个参数 所以直接用等号进分隔 如果有多个参数 要用&号分隔 再用等号进行分隔) alert(strs[1]); //直接弹出第一个参数 (如果有多个参数 还要进行循环的) }}
一、正则法
```
functiongetQueryString(name) {
varreg = newRegExp('(^|&)'+ name + '=([^&]*)(&|$)', 'i');
varr = window.location.search.substr(1).match(reg);
if(r != null) {
returnunescape(r[2]);}returnnull;}
// 这样调用:
alert(GetQueryString("参数名1"));
alert(GetQueryString("参数名2"));
alert(GetQueryString("参数名3"));
```
二、split拆分法
```
functionGetRequest() {varurl = location.search; //获取url中"?"符后的字串
vartheRequest = newObject();if(url.indexOf("?") != -1) {varstr = url.substr(1);strs = str.split("&");
for(vari = 0; i < strs.length; i ++) {theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);}}returntheRequest;}
varRequest = newObject();Request = GetRequest();
// var id=Request["id"];
// var 参数1,参数2,参数3,参数N;
// 参数1 = Request['参数1'];
// 参数2 = Request['参数2'];
// 参数3 = Request['参数3'];
// 参数N = Request['参数N'];
```
三、指定取
比如说一个url:http://i.cnblogs.com/?j=js,我们想得到参数j的值,可以通过以下函数调用。
```
functionGetQueryString(name) {
varreg = newRegExp("(^|&)"+ name + "=([^&]*)(&|$)", "i");
varr = window.location.search.substr(1).match(reg); //获取url中"?"符后的字符串并正则匹配
varcontext = ""; if(r != null) context = r[2]; reg = null; r = null; returncontext == null|| context == ""|| context == "undefined"? "": context; }alert(GetQueryString("j"));
```
四、单个参数的获取方法
```
functionGetRequest() {
varurl = location.search; //获取url中"?"符后的字串if(url.indexOf("?") != -1) { //判断是否有参数
varstr = url.substr(1); //从第一个字符开始 因为第0个是?号 获取所有除问号的所有符串
strs = str.split("="); //用等号进行分隔 (因为知道只有一个参数 所以直接用等号进分隔 如果有多个参数 要用&号分隔 再用等号进行分隔)
alert(strs[1]); //直接弹出第一个参数 (如果有多个参数 还要进行循环的)}}
```
- 基本说明
- 常用在线前端CDN库
- 公共代码部分
- HTML基础
- 媒体查询(调整各种屏幕下的效果)
- 网站备案
- 阿里云备案
- 域名解析
- 阿里云常规解析
- 手机端M.后缀
- 301跳转
- 在线客服咨询平台解决方案
- 百度商桥
- 商务通
- 美恰客服
- 腾讯QQ
- 建站系统自带
- 逸创·云客服
- 编辑器组件高级用法
- 社区分享
- 新闻类
- 图文
- Tab组件自定义
- 子导航自定义
- 文字
- 幻灯片
- 手机端导航栏
- 电脑端导航
- 单页面导航
- 单排导航
- 表单
- 栏目条
- 背景
- 图文组件基础应用
- 图文组件高级应用
- jPages分页插件使用(用于普通图文分页)
- 图文上下滚动
- 底部吸底导航
- Layer弹窗特效
- 页面进入弹窗
- 弹窗特效
- 视频弹窗
- 字体图标
- Iconfont(阿里图标库)
- Font Awesome
- Chrome开发者工具中文文档
- 悬浮在线客服
- 华为云右侧在线客服
- 装修公司
- CSS
- DIV CSS3 box-shadow对象盒子阴影和图片阴影
- CSS选择器
- 边框
- 旋转
- JS
- URL网址信息
- JQ
- JQ选择器
- 常用JQ
- jQuery标签替换函数replaceWith()的使用例子
- 锚链接动画
- 手机端
- 全局样式
- 导航
- PC导航菜单
- 插件
- 鼠标悬浮跟随
- 简单的Material Design风格手机App菜单特效
- 动画