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 相关文章推荐
一个简单的瀑布流效果(主体形式自写)
May 27 Javascript
JS限制Textarea文本域字符个数的具体实现
Aug 02 Javascript
JavaScript获取图片真实大小代码实例
Sep 24 Javascript
Javascript数组Array基础介绍
Mar 13 Javascript
浅析JavaScript中var that=this
Feb 17 Javascript
JS实现针对给定时间的倒计时功能示例
Apr 11 Javascript
vue与bootstrap实现时间选择器的示例代码
Aug 26 Javascript
VSCode中如何利用d.ts文件进行js智能提示
Apr 13 Javascript
微信小程序如何利用getCurrentPages进行页面传值
Jul 01 Javascript
vue 使用axios 数据请求第三方插件的使用教程详解
Jul 05 Javascript
vue.js的状态管理vuex中store的使用详解
Nov 08 Javascript
解决Vue在Tomcat8下部署页面不加载的问题
Nov 12 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
PHP extract 将数组拆分成多个变量的函数
2010/06/30 PHP
php cookie工作原理与实例详解
2016/07/18 PHP
保证JavaScript和Asp、Php等后端程序间传值编码统一
2009/04/17 Javascript
关于js注册事件的常用方法
2013/04/03 Javascript
js 实现菜单左右滚动显示示例介绍
2013/11/21 Javascript
javascript 用函数语句和表达式定义函数的区别详解
2014/01/06 Javascript
浅谈jQuery中replace()方法
2015/05/13 Javascript
简单分析javascript面向对象与原型
2015/05/21 Javascript
js无提示关闭浏览器窗口的两种方法分析
2016/11/06 Javascript
angularjs中使用ng-bind-html和ng-include的实例
2017/04/28 Javascript
vuejs 单文件组件.vue 文件的使用
2017/07/28 Javascript
jQuery实现table中两列CheckBox只能选中一个的示例
2017/09/22 jQuery
微信小程序tabBar用法实例详解
2017/12/04 Javascript
详解SPA中前端路由基本原理与实现方式
2018/09/12 Javascript
laypage.js分页插件使用方法详解
2019/07/27 Javascript
微信小程序引入模块中wxml、wxss、js的方法示例
2019/08/09 Javascript
微信小程序拼接图片链接无底洞深入探究
2019/09/03 Javascript
vue项目强制清除页面缓存的例子
2019/11/06 Javascript
详解Vue template 如何支持多个根结点
2020/02/10 Javascript
[52:03]Secret vs VG 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
学习python (1)
2006/10/31 Python
Linux系统(CentOS)下python2.7.10安装
2018/09/26 Python
python中报错&quot;json.decoder.JSONDecodeError: Expecting value:&quot;的解决
2019/04/29 Python
pytorch获取vgg16-feature层输出的例子
2019/08/20 Python
关于Python核心框架tornado的异步协程的2种方法详解
2019/08/28 Python
selenium WebDriverWait类等待机制的实现
2020/03/18 Python
在Ubuntu 20.04中安装Pycharm 2020.1的图文教程
2020/04/30 Python
使用Python matplotlib作图时,设置横纵坐标轴数值以百分比(%)显示
2020/05/16 Python
HTML5中使用postMessage实现Ajax跨域请求的方法
2016/04/19 HTML / CSS
用canvas实现图片滤镜效果附演示
2013/11/05 HTML / CSS
澳大利亚婴儿、幼儿和儿童在线设计师商店:Smooch Baby
2019/02/16 全球购物
英国Flybe航空官网:欧洲最大的独立支线廉价航空公司
2019/07/15 全球购物
2014信息技术专业毕业生自我评价
2014/01/17 职场文书
服务承诺书怎么写
2014/05/24 职场文书
Windows安装Anaconda3的方法及使用过程详解
2021/06/11 Python
SQL写法--行行比较
2021/08/23 SQL Server