最近看了几道面试题,其中有一道就是关于写一个方法来获取浏览器地址栏URL查询部分的字段内容。虽然之前看过相关的东西,但感觉有点模糊,所以就又全面的学习一遍,谨以此文记之!

准备知识

  在JavaScript中,既然说到URL(这里也只是根据本题浅显介绍),那肯定就要说Location对象了:

    ①Location对象是window对象的一个属性,可通过window.location来访问(因为window就是全局对象,所以可以直接使用location来引用Location对象喽);

    ②Location对象包含当前有关URL的信息。

  Location对象的八个属性:

属性

描述

hash

设置或返回从井号(#)开始的URL(锚)

host

设置或返回主机名和当前URL的端口号

hostname

设置或返回当前URL的主机名

href  

设置或返回完整的URL

pathname

设置或返回当前URL的路径部分

port

设置或返回当前URL的端口号

protocol

设置或返回当前URL的协议

search

设置或返回从问号(?)开始的URL(查询部分)

    还有一个属性,名字是origin,它的定义相当于:协议+主机名(域名)+端口号(IE下不支持此属性,我看w3cSchool上也没有,但Chrome和FF中却有,不知是否是标准)。以下是各个属性的实际取值(Chrome下):

    因为这个URL使用的是浏览器默认端口80,所以函数端口号的地方都使用空字符串代替了。

  Location对象的三个方法:

属性

描述

assign(newURL)

加载新的文档,会将当前文档地址和新的文档地址放到历史记录中

reload(force)

重新加载当前文档:①如果该方法没有设置参数,或者参数是 false,它就会用 HTTP 头 If-Modified-Since 来检测服务器上的文档是否已改变。如果文档已改变,reload() 会再次下载该文档。如果文档未改变,则该方法将从缓存中装载文档。这与用户单击浏览器的刷新按钮的效果是完全一样的;②如果把该方法的参数设置为 true,那么无论文档的最后修改日期是什么,它都会绕过缓存,从服务器上重新下载该文档。这与用户在单击浏览器的刷新按钮时按住 Shift 健的效果是完全一样。

replace(newURL)

用新的文档替换当前文档,但是当前文档地址会从历史记录中删除

获取URL参数

  上面复习了一下Location对象,下面开始说正题。获取URL参数,一开始我是把所有参数的信息都放入一个对象然后返回这个对象,实现如下:

function getUrlSearchObj(url){
var result = {};
var searchIndex = url.indexOf('?');
var hashIndex = url.indexOf('#')===-1?url.length:url.indexOf('#');
var searchStr = url.slice(searchIndex+1, hashIndex);
var searchArr = searchStr.split('&');
for(var i=0;i<searchArr.length;i++){
var eleArr = searchArr[i].split('=');
result[eleArr[0]] = eleArr[1];
}
return result;
}

  当然,在实际项目中大多数是根据一个参数名来获取当前URL中该参数的值,实现如下:

function getSearchString(name){
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
var result = window.location.search.substr(1).match(reg);
if(result != null){
return result[2];
}else{
return null;
}
}

JavaScript学习之获取URL参数的更多相关文章

  1. django学习-5.获取url参数和name的作用

    1.前言 假如我们要打开这两个博客园地址:[https://www.cnblogs.com/xiamen-momo/archive/2020/11.html].[https://www.cnblogs ...

  2. javascript获取url参数的方法

    发布:thatboy   来源:Net     [大 中 小] 本文介绍下,在javascript中取得url中某一个参数的方法,这里分享一个小例子,供大家学习参考下.本文转自:http://www. ...

  3. JavaScript获取URL参数公共方法

    写一个JavaScript获取URL参数的通用方法,可以把它放到常用方法的JS文件中调用,直接上代码例子,新手可以学习一下! <!DOCTYPE html> <html lang=& ...

  4. 多浏览器兼容用javascript获取url参数的方法比较推荐的一种

    多浏览器兼容用javascript获取url参数的方法比较推荐的一种 <script language = javascript> function request(paras){ var ...

  5. javascript获取URL参数和参数值

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. JavaScript&jQuery获取url参数方法

    JavaScript&jQuery获取url参数方法 function getUrlParam(name){ var reg = new RegExp("(^|&)" ...

  7. js_html_input中autocomplete="off"在chrom中失效的解决办法 使用JS模拟锚点跳转 js如何获取url参数 C#模拟httpwebrequest请求_向服务器模拟cookie发送 实习期学到的技术(一) LinqPad的变量比较功能 ASP.NET EF 使用LinqPad 快速学习Linq

    js_html_input中autocomplete="off"在chrom中失效的解决办法 分享网上的2种办法: 1-可以在不需要默认填写的input框中设置 autocompl ...

  8. JavaScript获取URL参数方法总汇

    现在做页面基本都用AJAX,因此导致操作很麻烦,每次都需要通过JS获取url中的参数值,网上所搜到很多资料,没一次能记住的,也不知道在哪个项目中使用过,现在又需要通过JS获取url参数,因此不能在偷懒 ...

  9. javascript 获取url参数

    /** window.location.search获取url地址?以后的值 获取url参数有两种方法,第一种如下,第二种是通过正则 */ //基本版 function getParam() { va ...

随机推荐

  1. li排序

    html <ul id="ul1"> <li>9</li> <li>2</li> <li>7</li& ...

  2. 网页信息抓取进阶 支持Js生成数据 Jsoup的不足之处

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/23866427 今天又遇到一个网页数据抓取的任务,给大家分享下. 说道网页信息抓取 ...

  3. mybaits使用存储过程

    如何使用Mybaits调用数据库存储过程,按以下顺序Oracle案例库: 1.在数据库中创建以下存储过程: create or replace procedure pro_hello(p_result ...

  4. cookie在vs又一次run的时候丢失

    今天写个关于http cookie的demo,发现仅仅要vs又一次执行后cookie的值就会丢失,代码例如以下 protected void Page_Load(object sender, Even ...

  5. 在前端一定要了解的HTML,CSS知识

    盒子模型 每个盒子都有4个属性:内容(content).填充(padding).边框(border).边界(margin) 每个属性都有四个部分:上.右.下.左 块级元素 内联元素 块级元素(bloc ...

  6. java javaEE javaWEB J2EE程序猿猿程序是脑损伤,终身工作程序猿

    这几天我越来越郁闷.程序员现在很火----特javaEE员. 但我觉得火只是给人们的工作程序员. 原因 javaweb该项目是非常大的.没听过那个码农能单独接到什么项目.仅仅能被人剥削. 有人不信,我 ...

  7. MapReduce 规划 六系列 MultipleOutputs采用

    在前面的示例,输出文件名是默认: _logs part-r-00001 part-r-00003 part-r-00005 part-r-00007 part-r-00009 part-r-00011 ...

  8. Android - 除首次使用状态(SharedPreferences)

    除首次使用状态(SharedPreferences) 本文地址: http://blog.csdn.net/caroline_wendy 用户首次登陆时, 可能须要用户教育, 解说界面操作, 可是不应 ...

  9. 设计模式之前奏(UML类图)

    原文:设计模式之前奏(UML类图) 本人菜菜一个,最近一直在博客园游走闲逛,看到了各种技术,各种各种…….便看到了大话设计模式这本书,下了电子版的看了看第一章,感觉相当不错,不仅通俗易懂,而且与实际案 ...

  10. EF6操作Sqlite数据库的项目兼容性问题

    vs2010无法正确打开2015创建的项目里面操作Sqlite数据库时使用EF6创建的edmx文件(会显示空白)   但是可以正常查询 vs2015无法正确打开2010创建的项目里面操作Sqlite数 ...