使用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 相关文章推荐
网页前台通过js非法字符过滤代码(骂人的话等等)
May 26 Javascript
JavaScript实现网页截图功能
Oct 16 Javascript
Javascript递归打印Document层次关系实例分析
May 15 Javascript
原生js获取iframe中dom元素--父子页面相互获取对方dom元素的方法
Aug 05 Javascript
微信小程序 两种为对象属性赋值的方式详解
Feb 23 Javascript
jQuery实现判断上传图片类型和大小的方法示例
Apr 11 jQuery
vue计算属性和监听器实例解析
May 10 Javascript
Postman的下载及安装教程详解
Oct 16 Javascript
解决vue初始化项目时,一直卡在Project description上的问题
Oct 31 Javascript
js获取本日、本周、本月的时间代码
Feb 01 Javascript
js 使用ajax设置和获取自定义header信息的方法小结
Mar 12 Javascript
js前端设计模式优化50%表单校验代码示例
Jun 21 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
解析PHP高效率写法(详解原因)
2013/06/20 PHP
解析VS2010利用VS.PHP插件调试PHP的方法
2013/07/19 PHP
PHP+FFMPEG实现将视频自动转码成H264标准Mp4文件
2014/09/24 PHP
PHP实现的简单日历类
2014/11/29 PHP
Laravel+jQuery实现AJAX分页效果
2016/09/14 PHP
php实现的顺序线性表示例
2019/05/04 PHP
node.js chat程序如何实现Ajax long-polling长链接刷新模式
2012/03/13 Javascript
easyui datagrid 键盘上下控制选中行示例
2014/03/31 Javascript
理解Javascript图片预加载
2016/02/23 Javascript
JS传递对象数组为参数给后端,后端获取的实例代码
2016/06/28 Javascript
Vue.js实现一个自定义分页组件vue-paginaiton
2016/09/05 Javascript
webpack+vue.js快速入门教程
2016/10/12 Javascript
Spring Boot+AngularJS+BootStrap实现进度条示例代码
2017/03/02 Javascript
JavaScript函数参数的传递方式详解
2017/03/06 Javascript
Node.js中环境变量process.env的一些事详解
2017/10/26 Javascript
vue修改对象的属性值后页面不重新渲染的实例
2018/08/09 Javascript
基于Three.js实现360度全景图片
2018/12/30 Javascript
Vue.extend实现挂载到实例上的方法
2019/05/01 Javascript
vue-router的两种模式的区别
2019/05/30 Javascript
如何使用CSS3+JQuery实现悬浮墙式菜单
2019/06/18 jQuery
详解React 条件渲染
2020/07/08 Javascript
python list 合并连接字符串的方法
2013/03/09 Python
python中zip和unzip数据的方法
2015/05/27 Python
对python中Matplotlib的坐标轴的坐标区间的设定实例讲解
2018/05/25 Python
python中计算一个列表中连续相同的元素个数方法
2018/06/29 Python
Python最小二乘法矩阵
2019/01/02 Python
对django 2.x版本中models.ForeignKey()外键说明介绍
2020/03/30 Python
Python restful框架接口开发实现
2020/04/13 Python
localStorage、sessionStorage使用总结
2017/11/17 HTML / CSS
Gap中国官网:美式休闲风服饰
2017/02/05 全球购物
英国健身超市:Fitness Superstore
2019/06/17 全球购物
玲玲的画教学反思
2014/02/04 职场文书
《花瓣飘香》教学反思
2014/04/15 职场文书
环卫工作个人总结
2015/03/04 职场文书
2015年学校办公室工作总结
2015/05/26 职场文书
《地。-关于地球的运动-》单行本第七集上市,小说家朝井辽献上期待又害怕的推荐文
2022/03/31 日漫