使用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 相关文章推荐
jQuery Pagination Ajax分页插件(分页切换时无刷新与延迟)中文翻译版
Jan 11 Javascript
jquery图片放大功能简单实现
Aug 01 Javascript
JS中图片缓冲loading技术的实例代码
Aug 29 Javascript
对比分析json及XML
Nov 28 Javascript
jQuery实现的Div窗口震动效果实例
Aug 07 Javascript
jQuery模仿单选按钮选中效果
Jun 24 Javascript
Angular.js自定义指令学习笔记实例
Feb 24 Javascript
jquery实现tab键进行选择后enter键触发click行为
Mar 29 jQuery
angular6.0使用教程之父组件通过url传递id给子组件的方法
Jun 30 Javascript
Vue+ElementUI项目使用webpack输出MPA的方法
Aug 27 Javascript
vue输入框使用模糊搜索功能的实现代码
May 26 Javascript
vue表单验证之禁止input输入框输入空格
Dec 03 Vue.js
返回函数的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 Sql Server连接失败问题及解决办法
2009/08/07 PHP
php实现的替换敏感字符串类实例
2014/09/22 PHP
Linux下源码包安装Swoole及基本使用操作图文详解
2019/04/02 PHP
Javascript 对象的解释
2008/11/24 Javascript
javascript的offset、client、scroll使用方法详解
2012/12/25 Javascript
jQuery中setTimeout的几种使用方法小结
2013/04/07 Javascript
extjs表格文本启用选择复制功能具体实现
2013/10/11 Javascript
jQuery中:submit选择器用法实例
2015/01/03 Javascript
js实现文字垂直滚动和鼠标悬停效果
2015/12/31 Javascript
jQuery增加、删除及修改select option的方法
2016/08/19 Javascript
jquery实现文字单行横移或翻转(上下、左右跳转)
2017/01/08 Javascript
zTree jQuery 树插件的使用(实例讲解)
2017/09/25 jQuery
浅谈vue的几种绑定变量的值 防止其改变的方法
2018/03/01 Javascript
jQuery+CSS实现的标签页效果示例【测试可用】
2018/08/14 jQuery
vue二级菜单导航点击选中事件的方法
2018/09/12 Javascript
JavaScript中BOM对象原理与用法分析
2019/07/09 Javascript
js中复选框的取值及赋值示例详解
2020/10/18 Javascript
vue 解决provide和inject响应的问题
2020/11/12 Javascript
学习python类方法与对象方法
2016/03/15 Python
JSON Web Tokens的实现原理
2017/04/02 Python
基于Django框架的权限组件rbac实例讲解
2019/08/31 Python
django的403/404/500错误自定义页面的配置方式
2020/05/21 Python
keras实现多GPU或指定GPU的使用介绍
2020/06/17 Python
HTML5之SVG 2D入门2—图形绘制(基本形状)介绍及使用
2013/01/30 HTML / CSS
英国时尚和家居用品零售商:Matalan
2021/02/28 全球购物
Linux文件系统类型
2012/02/15 面试题
卫校护理专业毕业生求职信
2013/11/26 职场文书
学习雷锋活动总结
2014/04/29 职场文书
出国英文推荐信
2014/05/10 职场文书
个人年终总结开头
2015/03/06 职场文书
升职感谢领导的话语及升职感谢信
2019/06/24 职场文书
浅谈Python列表嵌套字典转化的问题
2021/04/07 Python
laravel ajax curd 搜索登录判断功能的实现
2021/04/17 PHP
MySQL8.0.24版本Release Note的一些改进点
2021/04/22 MySQL
python实现A*寻路算法
2021/06/13 Python
Lombok的详细使用及优缺点总结
2021/07/15 Java/Android