使用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的表格操作插件
Apr 22 Javascript
jquery下json数组的操作实现代码
Aug 09 Javascript
jsPDF生成pdf后在网页展示实例
Jan 16 Javascript
页面js遇到乱码问题的解决方法是和无法转码的情况
Apr 30 Javascript
使用jQuery实现简单的tab框实例
Aug 22 jQuery
JavaScript实现打印星型金字塔功能实例分析
Sep 27 Javascript
prototype.js简单实现ajax功能示例
Oct 18 Javascript
图片懒加载imgLazyLoading.js使用详解
Sep 15 Javascript
微信小程序扫描二维码获取信息实例详解
May 07 Javascript
js之切换全屏和退出全屏实现代码实例
Sep 09 Javascript
layer.open 子页面弹出层向父页面传输数据的例子
Sep 26 Javascript
es6数组之扩展运算符操作实例分析
Apr 25 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之对抗Web扫描器的脚本技巧
2008/10/01 PHP
php 运行效率总结(提示程序速度)
2009/11/26 PHP
浅析PKI加密解密 OpenSSL
2013/07/01 PHP
收藏一些不常用,但是有用的代码
2007/03/12 Javascript
XMLHTTP 乱码的解决方法(UTF8,GB2312 编码 解码)
2011/01/12 Javascript
Javascript base64编码实现代码
2011/12/02 Javascript
教你如何自定义百度分享插件以及bshare分享插件的分享按钮
2014/06/20 Javascript
原生JavaScript实现异步多文件上传
2015/12/02 Javascript
如何使用Bootstrap的modal组件自定义alert,confirm和modal对话框
2016/03/01 Javascript
使用递归遍历对象获得value值的实现方法
2016/06/14 Javascript
JavaScript省市区三级联动菜单效果
2016/09/21 Javascript
JavaScript实现三级联动菜单效果
2017/08/16 Javascript
React Native悬浮按钮组件的示例代码
2018/04/05 Javascript
今天,小程序正式支持 SVG
2019/04/20 Javascript
layui之table checkbox初始化时选中对应选项的方法
2019/09/02 Javascript
vue实现移动端省市区选择
2019/09/27 Javascript
微信小程序接入腾讯云验证码的方法步骤
2020/01/07 Javascript
javascript设计模式 ? 享元模式原理与用法实例分析
2020/04/15 Javascript
浅谈vue中get请求解决传输数据是数组格式的问题
2020/08/03 Javascript
[02:20]2014DOTA2西雅图邀请赛 MVP外卡赛首胜采访
2014/07/09 DOTA
python关键字and和or用法实例
2015/05/28 Python
Python下Fabric的简单部署方法
2015/07/14 Python
python 删除列表里所有空格项的方法总结
2018/04/18 Python
对python中xlsx,csv以及json文件的相互转化方法详解
2018/12/25 Python
python opencv将图片转为灰度图的方法示例
2019/07/31 Python
python实现小程序推送页面收录脚本
2020/04/20 Python
python怎么判断模块安装完成
2020/06/19 Python
函授毕业生自我鉴定
2013/11/06 职场文书
施工安全协议书
2013/12/11 职场文书
触摸春天教学反思
2014/02/03 职场文书
企业年度评优方案
2014/06/02 职场文书
说好普通话圆梦你我他演讲稿
2014/09/21 职场文书
Python 使用dict实现switch的操作
2021/04/07 Python
Django实现聊天机器人
2021/05/31 Python
Nginx反向代理学习实例教程
2021/10/24 Servers
Go语言编译原理之源码调试
2022/08/05 Golang