1. Location 对象

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

Location 对象是 window 对象的一部分,可通过 window.Location 属性对其进行访问。

注意: 没有应用于Location对象的公开标准,不过所有浏览器都支持该对象。

2. Location 对象属性

属性 描述
hash 设置或返回从井号 (#) 开始的 URL(锚)。
host 设置或返回主机名和当前 URL 的端口号。
hostname 设置或返回当前 URL 的主机名。
href 设置或返回完整的 URL。
pathname 设置或返回当前 URL 的路径部分。
port 设置或返回当前 URL 的端口号。
protocol 设置或返回当前 URL 的协议。
search 设置或返回从问号 (?) 开始的 URL(查询部分)。

3. Location 对象方法

属性 描述
assign() 加载新的文档。
reload() 重新加载当前文档。
replace() 用新的文档替换当前文档。

window.location.assign(url) : 加载 URL 指定的新的 HTML 文档。就相当于一个链接,跳转到指定的url,当前页面会转为新页面内容,可以点击后退返回上一个页面。

window.location.replace(url) : 通过加载 URL 指定的文档来替换当前文档,这个方法是替换当前窗口页面,前后两个页面共用一个窗口,所以是没有后退返回上一页的

4. Location 对象描述

Location 对象存储在 Window 对象的 Location 属性中,表示那个窗口中当前显示的文档的 Web 地址。它的 href 属性存放的是文档的完整 URL,其他属性则分别描述了 URL 的各个部分。这些属性与 Anchor 对象(或 Area 对象)的 URL 属性非常相似。当一个 Location 对象被转换成字符串,href 属性的值被返回。这意味着你可以使用表达式 location 来替代 location.href。

不过 Anchor 对象表示的是文档中的超链接,Location 对象表示的却是浏览器当前显示的文档的 URL(或位置)。但是 Location 对象所能做的远远不止这些,它还能控制浏览器显示的文档的位置。如果把一个含有 URL 的字符串赋予 Location 对象或它的 href 属性,浏览器就会把新的 URL 所指的文档装载进来,并显示出来。

除了设置 location 或 location.href 用完整的 URL 替换当前的 URL 之外,还可以修改部分 URL,只需要给 Location 对象的其他属性赋值即可。这样做就会创建新的 URL,其中的一部分与原来的 URL 不同,浏览器会将它装载并显示出来。例如,假设设置了Location对象的 hash 属性,那么浏览器就会转移到当前文档中的一个指定的位置。同样,如果设置了 search 属性,那么浏览器就会重新装载附加了新的查询字符串的 URL。

除了 URL 属性外,Location 对象的 reload() 方法可以重新装载当前文档,replace() 可以装载一个新文档而无须为它创建一个新的历史记录,也就是说,在浏览器的历史列表中,新文档将替换当前文档。

5. 案例

5.1 案例 1

如图,如果 url 为 http://blog.xiaodongxier.com/?uid=100049064004&cmpid=s_a_copy#tz

location.origin
打印结果:http://blog.xiaodongxier.com location.protocol
打印结果:http location.host
打印结果:blog.xiaodongxier.com location.search
打印结果:?uid=100049064004&cmpid=s_a_copy location.hash
打印结果:#tz

5.2 案例 2

假设,URL为 http://localhost/training/test_javascript.html?name=xiaoli&sex=man,调用getSearchString("name") 会得到xiaoli。

function getSearchString(key) {
// 获取URL中?之后的字符
var str = location.search;
str = str.substring(1,str.length); // 以&分隔字符串,获得类似name=xiaoli这样的元素数组
var arr = str.split("&");
var obj = new Object(); // 将每一个数组元素以=分隔并赋给obj对象
for(var i = 0; i < arr.length; i++) {
var tmp_arr = arr[i].split("=");
obj[decodeURIComponent(tmp_arr[0])] = decodeURIComponent(tmp_arr[1]);
}
return obj[key];
}

5.3 案例 3

假设,URL为 http://blog.xiaodongxier.com/?uid=100049064004&cmpid=s_a_copy&name=xiaoli,调用 getUrlStr("uid") 会得到100049064004。

function getUrlStr(t) {
var e = new RegExp("(^|&)" + t + "=([^&]*)(&|$)", "i"),
o = window.location.search.substr(1).match(e);
return null != o ? unescape(o[2]) : null
}

获取URL中的某段字符的更多相关文章

  1. JQ获取URL中是否含有某个字符的话,对页面进行某种操作

    一.//JQ获取URL中是否含有某个字符的话,对页面进行某种操作 例:如果URL中含有xia的字符,就在页面引入一个cssvar str=window.location.href; //获取地址栏UR ...

  2. JS获取URL中参数值(QueryString)的4种方法分享<转>

    方法一:正则法 复制代码代码如下: function getQueryString(name) {    var reg = new RegExp('(^|&)' + name + '=([^ ...

  3. JS获取URL中参数值(QueryString)的4种方法

    方法一:正则法 function getQueryString(name) {    var reg = new RegExp('(^|&)' + name + '=([^&]*)(& ...

  4. JS获取URL中参数值(QueryString)的4种方法分享

    方法一:正则法 function getQueryString(name) { var reg = new RegExp('(^|&)' + name + '=([^&]*)(& ...

  5. JS获取URL中参数值的4种方法

    方法一:正则法 function getQueryString(name) { var reg = new RegExp('(^|&)' + name + '=([^&]*)(& ...

  6. JS获取URL中参数值

    一.正则法: function getQueryString(name) { var reg = new RegExp('(^|&)' + name + '=([^&]*)(& ...

  7. JS获取url中query_str JavaScript RegExp 正则表达式基础详谈

    面我们举例一个URL,然后获得它的各个组成部分:http://i.cnblogs.com/EditPosts.aspx?opt=1 1.window.location.href(设置或获取整个 URL ...

  8. 记录一次bug解决过程:velocity中获取url中的参数

    一.总结 在Webx的Velocity中获取url中参数:$rundata.getRequest().getParameter('userId') 在Webx项目中,防止CSRF攻击(Cross-si ...

  9. 如何获取URL中的参数

    获取URL中的某个参数或者所有参数以便我们后续去修改这个地址,在程序中是非常必要的.网上有很多这样的代码片段,为了以后查阅方便,顺便整理思路,下面使用2种方法来获取URL中的某个参数. 方法一 ,sp ...

随机推荐

  1. 【LeetCode】1200. Minimum Absolute Difference 解题报告 (C++)

    作者: 负雪明烛 id: fuxuemingzhu 个人博客:http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 排序 日期 题目地址:https://leetcode ...

  2. 【LeetCode】404. Sum of Left Leaves 解题报告(Python)

    作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目大意 题目大意 解题方法 递归 迭代 日期 [LeetCode] 题目地址:h ...

  3. 【LeetCode】904. Fruit Into Baskets 解题报告(Python)

    作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 题目地址: https://leetcode.com/problems/fruit-in ...

  4. 分布式系统(二)——GFS

    分布式存储系统的难点 在存储系统中,为了获得巨大的性能加成,一个很自然的想法就是采用分片(sharding),将数据分割存储到多台服务器上,这样获得了更大的存储容量,而且可以并行地从多台服务器读取数据 ...

  5. 台湾旺玖MA8601|USB HUB方案|MA8601测试版

    MA8601是USB 2.0高速4端口集线器控制器的高性能解决方案,完全符合通用串行总线规范2.0.MA8601继承了先进的串行接口技术,当4个DS(下游)端口同时工作时,功耗最低. MA8601采用 ...

  6. JDK中的BitMap实现之BitSet源码分析

    前提 本文主要内容是分析JDK中的BitMap实现之java.util.BitSet的源码实现,基于JDK11编写,其他版本的JDK不一定合适. 文中的图比特低位实际应该是在右边,但是为了提高阅读体验 ...

  7. Android系统编程入门系列之硬件交互——通信硬件USB

    在硬件交互的首篇对设备硬件的分类中,互联通信系列硬件主要用来与其他设备进行数据交互.从本文开始,将重点介绍该系列相关硬件. 互联通信系列硬件 根据硬件的可通信距离,由近及远分为USB.NFC.蓝牙.W ...

  8. Linux登录时,下游回显非常慢

    问题现象 登录linux时,远程连接正常,[root@...]回显非常慢,在执行脚本时,很容易导致命令下发错乱 原因分析 家目录下的.bash_history文件太大,导致每次登陆时读取这个文件耗时太 ...

  9. java 多态 总结

    1.前言 引用教科书解释: 多态是同一个行为具有多个不同表现形式或形态的能力. 多态就是同一个接口,使用不同的实例而执行不同操作. 通俗来说: 总结:多态的抽象类与接口有点相似: 父类不需要具体实现方 ...

  10. nvm切换node版本出现乱码 exit status 1:

    nvm切换nodejs版本出现exit status 1:乱码 跟着网上的教程一步一步做,还是出现问题.浪费一下午的时间 最后发现却因为我没用CMD管理员权限运行 扑街 解决方法: 用管理员身份运行就 ...