Location对象常用知识总结

产品终于上线,后期主要是优化了。在开发过程中用到了很多location对象的知识,趁现在有时间先整理一下。



Location 对象存储在 Window 对象的 Location 属性中,可通过window.location对其访问,表示那个窗口中当前显示的文档的 Web 地址。它的 href 属性存放的是文档的完整 URL,其他属性则分别描述了 URL 的各个部分。

一、Location 对象属性

属性 描述
href 设置或返回完整的 URL。
host 设置或返回主机名和当前 URL 的端口号。
hash 设置或返回从井号 (#) 开始的 URL(锚)。如果地址里没有“#”,则返回空字符串。
hostname 设置或返回当前 URL 的主机名。
pathname 设置或返回当前 URL 的路径部分。
port 设置或返回当前 URL 的端口号。
protocol 设置或返回当前 URL 的协议。取值为 ‘http:‘,‘https:‘,‘file:‘ 等等。
search  设置或返回从问号 (?) 开始的 URL(查询部分)。

使用实例:

(1)在利用ajax进行交互的时候,一般URL的域名部分是一样的,所以通常会在common.js里面定义一个常量。

如果ajax访问的URL的域名和前端页面访问的域名是一样的,这个时候就可以利用location对象来动态获取前端页面访问的域名之后,再来定义这个公共常量。如下:

(网址为 :http://demo.emmaclub.com/wechat/index,那么window.location.host 获取的为 :demo.emmaclub.com)

(2)在开发过程中,如果想要利用JavaScript代码从当前页跳转到其他页面,可以直接使用href属性。

window.location.href = ‘‘;

还有一种跳转方法是使用location对象的replace()方法。

上述代码相当于:

(3)区分上述属性:

二、Location 对象方法

reload()方法其实相当于刷新,而replace(URL)方法则是相当于a标签跳转。



这里顺便提一下URL的组成。

三、URL的组成

URL是Uniform Resource Location的缩写,译为“统一资源定位符”。通俗地说,URL是Internet上用来描述信息资源的字符串,主要用在各种WWW客户程序和服务器程序上,特别是著名的Mosaic。采用URL可以用一种统一的格式来描述各种信息资源,包括文件、服务器的地址和目录等。

URL的格式URL的格式大概由下列三部分组成: 
第一部分是协议(或称为服务方式); 
第二部分是存有该资源的主机IP地址(有时也包括端口号); 
第三部分是主机资源的具体地址。,如目录和文件名等。 
第一部分和第二部分之间用“://”符号隔开,第二部分和第三部分用“/”符号隔开。第一部分和第二部分是不可缺少的,第三部分有时可以省略。

就以下面这个URL为例,介绍下普通URL的各部分组成:

http://www.aspxfans.com:8080/news/index.asp?boardID=5&ID=24618&page=1#name

从上面的URL可以看出,一个完整的URL包括以下几部分:
1.协议部分:该URL的协议部分为“http:”,这代表网页使用的是HTTP协议。在Internet中可以使用多种协议,如HTTP,FTP等等本例中使用的是HTTP协议。在"HTTP"后面的“//”为分隔符

2.域名部分:该URL的域名部分为“www.aspxfans.com”。一个URL中,也可以使用IP地址作为域名使用

3.端口部分:跟在域名后面的是端口,域名和端口之间使用“:”作为分隔符。端口不是一个URL必须的部分,如果省略端口部分,将采用默认端口

4.虚拟目录部分:从域名后的第一个“/”开始到最后一个“/”为止,是虚拟目录部分。虚拟目录也不是一个URL必须的部分。本例中的虚拟目录是“/news/”

5.文件名部分:从域名后的最后一个“/”开始到“?”为止,是文件名部分,如果没有“?”,则是从域名后的最后一个“/”开始到“#”为止,是文件部分,如果没有“?”和“#”,那么从域名后的最后一个“/”开始到结束,都是文件名部分。本例中的文件名是“index.asp”。文件名部分也不是一个URL必须的部分,如果省略该部分,则使用默认的文件名

6.锚部分:从“#”开始到最后,都是锚部分。本例中的锚部分是“name”。锚部分也不是一个URL必须的部分

7.参数部分:从“?”开始到“#”为止之间的部分为参数部分,又称搜索部分、查询部分。本例中的参数部分为“boardID=5&ID=24618&page=1”。参数可以允许有多个参数,参数与参数之间用“&”作为分隔符。

时间: 2024-11-07 20:37:44

Location对象常用知识总结的相关文章

分享location对象常用的属性

window.location.search = "?name=cca&val=333" //参数 window.location.href //获取完整路径 window.location.hash //哈希值 window.location.hostname //主机名 window.location.port = 80 //端口 window.location.pathname //路径 window.location.protocol //协议 window.locat

JavaScript之DOM-7 Window常用子对象(navigator对象、location对象、history对象、screen对象)

一.navigator对象 navigator对象的作用 - navigator 对象包含有关浏览器的信息 - 常用于获取客户端浏览器和操作系统信息 常用属性和方法 二.location 对象 location 对象的作用 - location 对象包含有关当前 URL 的信息 - 常用于获取和改变当前浏览器的网址 常用属性和方法 三.history对象 history对象的作用 - history对象包含用户(在浏览器窗口中)访问过的URL的历史记录 常用属性和方法 四.screen对象 sc

HTML5常用知识

今日做项目,涉及到native和H5页面的交互 1.document.readyState document.readyState:判断文档是否加载完成.firefox不支持. 这个属性是只读的,传回值有以下的可能: 0-UNINITIALIZED:XML 对象被产生,但没有任何文件被加载. 1-LOADING:加载程序进行中,但文件尚未开始解析. 2-LOADED:部分的文件已经加载且进行解析,但对象模型尚未生效. 3-INTERACTIVE:仅对已加载的部分文件有效,在此情况下,对象模型是有

BOM之location对象

定义 location提供了与当前窗口中加载的文档有关的信息,还提供了一些导航功能.location是一个很特别的对象,因为它既是window对象的属性,也是document对象的属性.换句话说,window.location和document.location引用的是同一个对象. console.log(window.location) console.log(document.location) 查询字符串参数 location将URL解析成独立的片段,让开发人员可以通过不同的属性访问这些片

location对象[第8章-浏览器对象模型BOM 笔记2]

location 是最有用的 BOM对象之一,它提供了与当前窗口中加载的文档有关的信息,还提供了一些导航功能.事实上, location 对象是很特别的一个对象,因为它既是 window 对象的属性,也是document 对象的属性:换句话说, window.location 和 document.location 引用的是同一个对象.location 对象的用处不只表现在它保存着当前文档的信息,还表现在它将 URL 解析为独立的片段,让开发人员可以通过不同的属性访问这些片段.下表列出了 loc

javascript之BOM对象(二location对象)

一.location对象提供和当前加载的文档相关的信息还有一些导航功能.location对象是window对象的属性,同时也是document对象的属性.window.location和document.location指向同一个对象. location对象不仅保存着当前文档的信息,还可以将URL解析为独立的字段,可以通过不同的属性访问这些片段. location的所有属性如下 属性名 例子 说明 hash #contents 返回URL中的hash(#号后跟0个或多个字符) host loca

js window对象常用内容

window对象表示的是浏览器的窗口.如果文档包含框架(frame 或 iframe 标签),浏览器会为 HTML 文档创建一个 window 对象,并为每个框架创建一个额外的 window 对象. 没有多个框架,在一个框架中,window为一个,所以window可以省略书写. 它有很多属性和方法. Navigator   获取浏览器的信息 Screen     获取屏幕的信息 History    包含用户在浏览器窗口中访问过的 URL. Location     包含有关当前 URL 的信息

Python数据分析与挖掘所需的Pandas常用知识

Python数据分析与挖掘所需的Pandas常用知识 前言Pandas基于两种数据类型:series与dataframe.一个series是一个一维的数据类型,其中每一个元素都有一个标签.series类似于Numpy中元素带标签的数组.其中,标签可以是数字或者字符串.一个dataframe是一个二维的表结构.Pandas的dataframe可以存储许多种不同的数据类型,并且每一个坐标轴都有自己的标签.你可以把它想象成一个series的字典项. Pandas常用知识 一.读取csv文件为dataf

全体快三源码开发Python数据分析与挖掘所需的Pandas常用知识

前言 全体快三源码开发 (http://www.1159880099.com) QQ1159880099 Pandas基于两种数据类型:series与dataframe. 一个series是一个一维的数据类型,其中每一个元素都有一个标签.series类似于Numpy中元素带标签的数组.其中,标签可以是数字或者字符串. 一个dataframe是一个二维的表结构.Pandas的dataframe可以存储许多种不同的数据类型,并且每一个坐标轴都有自己的标签.你可以把它想象成一个series的字典项.