使用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 相关文章推荐
让mayfish支持mysqli数据库驱动的实现方法
May 22 Javascript
JQuery从头学起第二讲
Jul 04 Javascript
JQuery魔力之$(&quot;tagName&quot;)与selector
Mar 05 Javascript
用javascript读取xml文件读取节点数据
Aug 12 Javascript
jQuery统计上传文件大小的方法
Jan 24 Javascript
jQuery+css实现的蓝色水平二级导航菜单效果代码
Sep 11 Javascript
微信小程序中使元素占满整个屏幕高度实现方法
Dec 14 Javascript
JavaScript实现汉字转换为拼音的库文件示例
Dec 22 Javascript
Angular 4依赖注入学习教程之ValueProvider的使用(七)
Jun 04 Javascript
基于VUE.JS的移动端框架Mint UI的使用
Oct 11 Javascript
浅谈webpack打包过程中因为图片的路径导致的问题
Feb 21 Javascript
手把手教你用Node.js爬虫爬取网站数据的方法
Jul 05 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 404错误页面实现代码
2009/06/22 PHP
php中使用getimagesize获取图片、flash等文件的尺寸信息实例
2014/04/29 PHP
简单谈谈PHP中的include、include_once、require以及require_once语句
2016/04/23 PHP
Laravel+jQuery实现AJAX分页效果
2016/09/14 PHP
共享自己写一个框架DreamScript
2007/01/20 Javascript
JavaScript 一道字符串分解的题目
2011/08/03 Javascript
jQuery UI Autocomplete 1.8.16 中文输入修正代码
2012/04/16 Javascript
基于jquery的DIV随滚动条滚动而滚动的代码
2012/07/20 Javascript
js实现图片放大缩小功能后进行复杂排序的方法
2012/11/08 Javascript
js replace替换所有匹配的字符串
2014/02/13 Javascript
全面兼容的javascript时间格式化函数(比较实用)
2014/05/14 Javascript
nodejs教程之入门
2014/11/21 NodeJs
moment.js轻松实现获取当前日期是当年的第几周
2015/02/05 Javascript
Javascript数据结构与算法之列表详解
2015/03/12 Javascript
JavaScript中的this,call,apply使用及区别详解
2016/01/29 Javascript
jQuery EasyUI编辑DataGrid用combobox实现多级联动
2016/08/29 Javascript
JavaScript实现审核流程状态的动态显示进度条
2017/03/15 Javascript
详解axios在node.js中的post使用
2017/04/27 Javascript
Javarscript中模块(module)、加载(load)与捆绑(bundle)详解
2017/05/28 Javascript
jquery传参及获取方式(两种方式)
2020/02/13 jQuery
vue使用exif获取图片经纬度的示例代码
2020/12/11 Vue.js
python3.4用循环往mysql5.7中写数据并输出的实现方法
2017/06/20 Python
Python如何实现MySQL实例初始化详解
2017/11/06 Python
详解Python的三种可变参数
2019/05/08 Python
Django密码系统实现过程详解
2019/07/19 Python
html5使用Canvas绘图的使用方法
2017/11/21 HTML / CSS
美国网上花店:JustFlowers
2017/02/12 全球购物
在线购买世界上最好的酒:BoozeBud
2018/06/07 全球购物
餐饮收银员岗位职责
2014/02/07 职场文书
《青蛙看海》教学反思
2014/04/23 职场文书
企业理念标语
2014/06/09 职场文书
赔偿协议书范本
2014/09/12 职场文书
入党积极分子自我批评思想汇报
2014/10/10 职场文书
2015年房产销售工作总结范文
2015/05/22 职场文书
Mysql使用全文索引(FullText index)的实例代码
2022/04/03 MySQL
IDEA中sout快捷键无效问题的解决方法
2022/07/23 Java/Android