JS获取地址栏参数的两种方法(简单实用)


Posted in Javascript onJune 14, 2016

js获取地址栏参数的方法有两种:第一种,采用正则表达式获取地址栏参数,第二种,是比较传统的方法,在这小编给大家强烈推荐使用第一种方法,既方便有实用,具体实现过程请看下文详述。

方法一:采用正则表达式获取地址栏参数:( 强烈推荐,既实用又方便!)

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;
}

// 调用方法

alert(GetQueryString("参数名1"));

alert(GetQueryString("参数名2"));

alert(GetQueryString("参数名3"));

下面举一个例子:

若地址栏URL为:abc.html?id=123&url=http://www.maidq.com

那么,但你用上面的方法去调用:alert(GetQueryString("url"));

则会弹出一个对话框:内容就是 http://www.maidq.com

如果用:alert(GetQueryString("id"));那么弹出的内容就是 123 啦;

当然如果你没有传参数的话,比如你的地址是 abc.html 后面没有参数,那强行输出调用结果有的时候会报错:

所以我们要加一个判断 ,判断我们请求的参数是否为空,首先把值赋给一个变量:

var myurl=GetQueryString("url");
if(myurl !=null && myurl.toString().length>1)
{
alert(GetQueryString("url"));
}

这样就不会报错了!

方法二:传统方法

<script type="text/javascript">
function UrlSearch() 
{
var name,value; 
var str=location.href; //取得整个地址栏
var num=str.indexOf("?") 
str=str.substr(num+1); //取得所有参数 stringvar.substr(start [, length ]

var arr=str.split("&"); //各个参数放到数组里
for(var i=0;i < arr.length;i++){ 
num=arr[i].indexOf("="); 
if(num>0){ 
name=arr[i].substring(0,num);
value=arr[i].substr(num+1);
this[name]=value;
} 
} 
} 
var Request=new UrlSearch(); //实例化
alert(Request.id);
</script>

比如说把这个代码存为1.html

那么我要访问1.html?id=test

这个时候就取到test的值了

在html里调用

<script type="text/javascript">
var a="http://baidu.com";
</script>
</head>
<body>
<a id="a1" href="">sadfsdfas</a>
<script>
var a1=document.getElementById("a1");
a1.href=a;
</script>
<script type="text/javascript"> 
var a="http://xxx.com/gg.htm?cctv"; 
var s=a.indexOf("?"); 
var t=a.substring(s+1);// t就是?后面的东西了 
</script>

stringvar.substr(start [, length ]

返回一个从指定位置开始的指定长度的子字符串。

stringvar

必选项。要提取子字符串的字符串文字或 String 对象。

start

必选项。所需的子字符串的起始位置。字符串中的第一个字符的索引为 0。

length

可选项。在返回的子字符串中应包括的字符个数。

如果 length 为 0 或负数,将返回一个空字符串。如果没有指定该参数,则子字符串将延续到 stringvar 的最后。

下面列举出一些相关的参数:

str.toLowerCase() 转换成小写
str.toUpperCase() 字符串全部转换成大写

URL即:统一资源定位符 (Uniform Resource Locator, URL)

完整的URL由这几个部分构成:

scheme://host:port/path?query#fragment

scheme:通信协议

常用的http,ftp,maito等

host:主机

服务器(计算机)域名系统 (DNS) 主机名或 IP 地址。

port:端口号

整数,可选,省略时使用方案的默认端口,如http的默认端口为80。

path:路径

由零或多个"/"符号隔开的字符串,一般用来表示主机上的一个目录或文件地址。

query:查询

可选,用于给动态网页(如使用CGI、ISAPI、PHP/JSP/ASP/ASP.NET等技术制作的网页)传递参数,可有多个参数,用"&"符号隔开,每个参数的名和值用"="符号隔开。

fragment:信息片断
字符串,用于指定网络资源中的片断。例如一个网页中有多个名词解释,可使用fragment直接定位到某一名词解释。(也称为锚点.)

对于这样一个URL

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

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

1, window.location.href

整个URl字符串(在浏览器中就是完整的地址栏)

本例返回值: http://www.maidq.com/index.html?ver=1.0&id=6#imhere

2,window.location.protocol

URL 的协议部分

本例返回值:http:

3,window.location.host

URL 的主机部分

本例返回值:www.maidq.com

4,window.location.port

URL 的端口部分

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

本例返回值:""

5,window.location.pathname

URL 的路径部分(就是文件地址)

本例返回值:/fisker/post/0703/window.location.html

6,window.location.search

查询(参数)部分

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

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

7,window.location.hash

锚点

本例返回值:#imhere

以上所述是小编给大家介绍的JS获取地址栏参数的两种方法(简单实用)的全部叙述,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JS 常用校验函数
Mar 26 Javascript
纯CSS打造的导航菜单(附jquery版)
Aug 07 Javascript
Javascript 八进制转义字符(8进制)
Apr 08 Javascript
.net,js捕捉文本框回车键事件的小例子(兼容多浏览器)
Mar 11 Javascript
javascript:void(0)的作用示例介绍
Oct 28 Javascript
JS实现同时搜索百度和必应的方法
Jan 27 Javascript
JS实现仿新浪微博发布内容为空时提示功能代码
Aug 19 Javascript
Angular中$compile源码分析
Jan 28 Javascript
jQuery插件ImageDrawer.js实现动态绘制图片动画(附源码下载)
Feb 25 Javascript
vue插件draggable实现拖拽移动图片顺序
Dec 01 Javascript
Element Notification通知的实现示例
Jul 27 Javascript
Javascript表单序列化原理及实现代码详解
Oct 30 Javascript
Javascript基础_嵌入图像的简单实现
Jun 14 #Javascript
jQuery实例—选项卡的简单实现(js源码和jQuery)
Jun 14 #Javascript
浅析JS获取url中的参数实例代码
Jun 14 #Javascript
Javascript基础_标记文字的实现方法
Jun 14 #Javascript
深入浅析JavaScript的API设计原则
Jun 14 #Javascript
jQuery.Callbacks()回调函数队列用法详解
Jun 14 #Javascript
基于gulp合并压缩Seajs模块的方式说明
Jun 14 #Javascript
You might like
ob_start(),ob_start('ob_gzhandler')使用
2006/12/25 PHP
比较全的PHP 会话(session 时间设定)使用入门代码
2008/06/05 PHP
PHP捕获Fatal error错误的方法
2014/06/11 PHP
php单链表实现代码分享
2016/07/04 PHP
模仿JQuery sortable效果 代码有错但值得看看
2009/11/05 Javascript
使用ExtJS技术实现的拖动树结点
2010/08/05 Javascript
Javascript基础_标记文字的实现方法
2016/06/14 Javascript
jQuery树形控件zTree使用小结
2016/08/02 Javascript
详细讲解JavaScript中的this绑定
2016/10/10 Javascript
Ajax跨域实现代码(后台jsp)
2017/01/21 Javascript
Bootstrap进度条学习使用
2017/02/09 Javascript
Extjs 中的 Treepanel 实现菜单级联选中效果及实例代码
2017/08/22 Javascript
使用validate.js实现表单数据提交前的验证方法
2018/09/04 Javascript
详解Vue实战指南之依赖注入(provide/inject)
2018/11/13 Javascript
基于JS实现web端录音与播放功能
2019/04/17 Javascript
layui当点击文本框时弹出选择框,显示选择内容的例子
2019/09/02 Javascript
原生js实现购物车功能
2020/09/23 Javascript
[44:43]完美世界DOTA2联赛决赛日 FTD vs GXR 第一场 11.08
2020/11/11 DOTA
利用Python爬取可用的代理IP
2016/08/18 Python
Python实现动态加载模块、类、函数的方法分析
2017/07/18 Python
python 获取list特定元素下标的实例讲解
2018/04/09 Python
Python3数据库操作包pymysql的操作方法
2018/07/16 Python
运用Python的webbrowser实现定时打开特定网页
2019/02/21 Python
python3实现小球转动抽奖小游戏
2020/04/15 Python
python matplotlib库绘制散点图例题解析
2019/08/10 Python
Python3列表List入门知识附实例
2020/02/09 Python
Pytorch maxpool的ceil_mode用法
2020/02/18 Python
python中pickle模块浅析
2020/12/29 Python
阿迪达斯新加坡官方网站:adidas新加坡
2019/12/06 全球购物
Pandora西班牙官方商店:PandoraShop.es
2020/10/05 全球购物
股权投资意向书
2014/04/01 职场文书
《中国梦我的梦》小学生演讲稿
2014/08/20 职场文书
2014迎国庆演讲稿
2014/09/19 职场文书
2016大学军训通讯稿
2015/11/25 职场文书
《思路决定出路》读后感3篇
2019/12/11 职场文书
vue使用节流函数的踩坑实例指南
2021/05/20 Vue.js