【js学习笔记-069】--- window 之定位和导航

本文详细介绍了JavaScript中的Location对象,包括其属性如href、hash等的作用及使用方法,如何通过Location对象载入新文档,以及如何解析URL中的参数。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

Window对象的location属性引用的是Location对象,它表示该窗口中当前显示的文档的URL,并定义了方法来使窗口载入新的文档。

Document.location属性也引用到Location对象

window.location===document.location //总是返回true

Document对象也有一个URL属性,是文档首次载入后保存该文档的URL的静态字符串。如果要定义到文档中片段标识符如#table-of-contents,Location对象会做相应的更新,而document.URL 属性不会改变。

解析URL

window对象的location属性引用的是Location对象,它表示该窗口中当前显示的文档的URL。

Location对象的href属性是一个字符串,它包含了URL的完整文本

Location对象的toString()方法返回href属性的值,因此在会隐匿调用toString()的情况下,可以使用location代替location.href。

其它属性还有:

属性

描述

IE

F

O

hash

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

4

1

9

host

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

4

1

9

hostname

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

4

1

9

href

设置或返回完整的 URL。

4

1

9

pathname

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

4

1

9

port

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

4

1

9

protocol

设置或返回当前 URL 的协议。

4

1

9

search

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

4

1

9

 

下面定义一个可以提取url参数的方法

/**

这个函数是用来解析来自URL的查询中的name=value参数对 它将name=value对存储在一个对象的属性中,并返回该对象

*/

function urlArgs(query){

     var args= {};

     var pairs = query.split("&");

     for(var i=0;i<pairs.length;i++){

         var pos = pairs[i].indexOf('=');;

         if(pos == -1)continue;

         var name = pairs[i].substring(0,pos);

         var value = pairs[i].substring(pos+1);

         value = decodeURIComponent(value);

         args[name] = value;

     }

    return args;

}


载入新的文档

assign()

 可以使窗口载入并显示你指定的URL中的文档

replace()

和assign方法一样,但在载入新文档之前会从浏览历史中把当前文档删除。如果脚本无条件的载入新文档,replace方法可能是比assign方法更好的选择。否则,后退按钮会把浏览器带回到原始文档

reload()

浏览器重新载入当前文档

 

使浏览器跳转到新页面的一种更传统的方法是直接把新的url赋值给location属性。

可以是绝对路径,也可以是相对路径(相对于当前页面位置)还可以是页面的一个锚点。

 

注意,location对象的URL分解属性是可写的,对它们重新赋值会改变URL的位置,并且导致浏览器载入一个新的文档。如果是改变的是hash值,则在当前文档中进行跳转,如:

location.search = "?page="+(pagenum+1);//载入下一个页面


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值