使用js获取地址栏参数的方法推荐(超级简单)


Posted in Javascript onJune 14, 2016

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

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=https://3water.com

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

则会弹出一个对话框:内容就是 https://3water.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

https://3water.com/index.html?ver=1.0&id=6#imhere

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

1, window.location.href

整个URl字符串(在浏览器中就是完整的地址栏)
本例返回值: https://3water.com/index.html?ver=1.0&id=6#imhere

2,window.location.protocol

URL 的协议部分
本例返回值:http:

3,window.location.host

URL 的主机部分
本例返回值:3water.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 相关文章推荐
利用div+jquery自定义滚动条样式的2种方法
Jul 18 Javascript
JavaScript动态改变HTML页面元素例如添加或删除
Aug 10 Javascript
深入理解关于javascript中apply()和call()方法的区别
Apr 12 Javascript
jQuery表格的维护和删除操作
Feb 03 Javascript
Agularjs妙用双向数据绑定实现手风琴效果
May 26 Javascript
Vue项目中引入外部文件的方法(css、js、less)
Jul 24 Javascript
浅谈React深度编程之受控组件与非受控组件
Dec 26 Javascript
Vue项目组件化工程开发实践方案
Jan 09 Javascript
jQuery zTree搜索-关键字查询 递归无限层功能实现代码
Jan 25 jQuery
原生javascript运动函数的封装示例【匀速、抛物线、多属性的运动等】
Feb 23 Javascript
Vue中watch、computed、updated三者的区别及用法
Jul 27 Javascript
小程序实现密码输入框
Nov 16 Javascript
返回函数的JavaScript函数
Jun 14 #Javascript
js数组的五种迭代方法及两种归并方法(推荐)
Jun 14 #Javascript
Web程序员必备的7个JavaScript函数
Jun 14 #Javascript
Javascript中的迭代、归并方法详解
Jun 14 #Javascript
JavaScript接口的实现三种方式(推荐)
Jun 14 #Javascript
jQuery处理XML文件的几种方法
Jun 14 #Javascript
你不需要jQuery(三) 新AJAX方法fetch()
Jun 14 #Javascript
You might like
《星际争霸》各版本雷兽特点图文解析 雷兽不同形态一览
2020/03/02 星际争霸
文章推荐系统(三)
2006/10/09 PHP
图书管理程序(二)
2006/10/09 PHP
探讨PHP使用eAccelerator的API开发详解
2013/06/09 PHP
destoon供应信息title调用出公司名称的方法
2014/08/22 PHP
PHP的伪随机数与真随机数详解
2015/05/27 PHP
PHP基于SPL实现的迭代器模式示例
2018/04/22 PHP
jquery autocomplete自动完成插件的的使用方法
2010/08/07 Javascript
jquery如何判断某元素是否具备指定的样式
2013/11/05 Javascript
js中继承的几种用法总结(apply,call,prototype)
2013/12/26 Javascript
获取3个数组不重复的值的具体实现
2013/12/30 Javascript
javascript委托(Delegate)blur和focus用法实例分析
2015/05/26 Javascript
JavaScript数组的一些奇葩行为
2016/01/25 Javascript
原生js制作日历控件实例分享
2016/04/06 Javascript
JavaScript构建自己的对象示例
2016/11/29 Javascript
详谈DOM简介及节点、属性、查找节点的方法
2017/11/16 Javascript
json数据传到前台并解析展示成列表的方法
2018/08/06 Javascript
js实现单元格拖拽效果
2020/02/10 Javascript
安装多版本Vue-CLI的实现方法
2020/03/24 Javascript
python打包压缩、读取指定目录下的指定类型文件
2018/04/12 Python
Python之csv文件从MySQL数据库导入导出的方法
2018/06/21 Python
python 实现语音聊天机器人的示例代码
2018/12/02 Python
python买卖股票的最佳时机(基于贪心/蛮力算法)
2019/07/05 Python
详解python方法之绑定方法与非绑定方法
2020/08/17 Python
python使用正则表达式匹配txt特定字符串(有换行)
2020/12/09 Python
python3.9实现pyinstaller打包python文件成exe
2020/12/13 Python
使用CSS3的box-sizing属性解决div宽高被内边距撑开的问题
2016/06/28 HTML / CSS
Html5新增标签有哪些
2017/04/13 HTML / CSS
Net Remoting把服务器端激活两种模式
2014/01/22 面试题
英语系本科生求职信
2014/07/15 职场文书
优秀团员事迹材料1000字
2014/08/20 职场文书
施工安全协议书范本
2014/09/26 职场文书
2014年银行年终工作总结
2014/12/19 职场文书
学习社交礼仪心得体会
2016/01/22 职场文书
3招让你摆脱即兴讲话冷场尴尬
2019/08/08 职场文书
win10双系统怎么删除一个系统?win10电脑有两个系统删除一个的操作方法
2022/07/15 数码科技