BOM - Location对象 / 开普饭

什么是Location对象?

Location是BOM对象之一

它可以看做是我们浏览器的地址栏输入框，提供了当前窗口中加载文档的有关信息，还提供了一些导航功能。

先来看一下属性：

url：统一资源定位符

我们依次来看一下：

location.hash; 锚点

当我们输出它时

alert( location.hash );

直接返回结果是没有锚点的

假设我们在地址栏中加上一个#1，再来刷新，就可以看到锚点出现了

所谓锚点，就是我们在浏览网页时候，地址栏后面跟的 # 部分

我们实际的生活中锚点是怎么运用的呢？

比如我们搜一下LOL的百度百科

这个锚点#3就代表页内跳转

上面是获取锚点，除了获取锚点还能对锚点进行设置

<script type="text/javascript"> window.onload= function(){ window.onclick= function(){ location.hash= "#666"; } }</script>

当我们点击任一处页面时，运行结果如下：

host 主机名 : 端口号

浏览器默认端口号 8080

IP：我们都知道电脑上网时都有IP，我们通过IP可以在全球找到这台电脑所使用的的网络地址

端口号：正在使用网络的软件，在当前电脑内唯一的标识。

也就是说，通过IP可以找到电脑，通过端口号可以找到我们电脑使用的网络软件。

hostname 主机名域名/IP

如果我们输出hostname是没有效果的，原因是因为我们是在本地加载页面的。

必须从服务器网络加载，才能显示出效果

例如，百度的www.baidu.com就是一个域名，我们通过终端来ping一下

可以看到它找到一些IP，复制一下这个IP，到浏览器中

可以看出输入IP和输入百度的地址显示出的效果是一样的

这也就是说域名就是给IP起了个好听的名字

href 整个url

我们来通过

alert(location.href);

返回的结果和location输出的结果是一样的

pathname 存放数据的路径名

我们来存放当前数据的时候呢，不止放在服务器中，还可能放在服务器中的某个文件中

来输出一下pathname

alert( location.pathname );

运行结果为这个文件的存储路径：

port 端口号

protocal 协议

返回http：就是从网络加载；

返回file：是从本地加载的

alert( location.protocol );

运行结果如下：

search 查询字符串

它是跟在 ? 后面的部分

正常输出

alert( location.search );

运行结果是什么都没有的

如果是在地址栏中加上?username=xxx&age=23

重新刷新后运行结果如下：

我们同样和设置锚点 # 那样也可以对这个进行设置：

<script type="text/javascript"> window.onload =function(){ window.onclick= function(){ location.search= "?xxx=yyy&age=23" } }</script>

运行结果当我们点击页面任意处时，地址栏就会出现?后面的语句：

三种location对象

对于location对象，我们来看一张图：

从图上可以看出，在window中有个location对象，在document中也有一个location对象

这些location对象其实都是一个location对象，我们来验证一下

首先我们来输出一下这三个location对象

<script type="text/javascript"> alert(window.location); alert(location); alert(window.document.location);</script>

运行结果如下：

可以看出输出的结果都是一样的

我们再去判断一下是否是相等的：

<script type="text/javascript"> //alert(window.location); //alert(location); //alert(window.document.location); alert(window.location ==window.document.location);</script>

运行结果如下：

也是没有问题

url 统一资源定位符

它的格式包括：

protocol( 协议 ):host( 主机名 ):port( 端口号 )/pathname( 路径 )?search( 查询字符串 )#hash( 锚点 )

我们拿百度举个例子：

http://www.baidu.com:8080/code/xxx.html?username=xxx&age=18#1

关于这些例子我们要了解，在用到的时候能想到就OK了

Location对象的方法

方法就是如上图的三个

assign 跳转到指定页面

举个小例子：

<head> <metacharset="utf-8"> <title></title> <script> window.onload = function(){ var oBtn = document.getElementById("btn"); oBtn.onclick = function(){ location.assign("http://www.baidu.com"); } }</script> </head><body> <input type="button" value="按钮"id="btn" /></body>

运行结果如下：

reload 重载当前的url

举个小例子：

<head> <metacharset="utf-8"> <title></title> <script> window.onload =function(){ var oBtn =document.getElementById("btn"); oBtn.onclick= function(){ //location.assign("http://www.baidu.com"); location.reload() } }</script> </head><body> <input type="button" value="按钮"id="btn" /></body>

运行结果点击按钮就会刷新界面

如果传参，参数为true时，强制加载，从服务器源头加载

replace 替换，用新的替换当前

举个小例子：

<head> <metacharset="utf-8"> <title></title> <script> window.onload =function(){ var oBtn =document.getElementById("btn"); oBtn.onclick= function(){ //location.assign("http://www.baidu.com"); //location.reload(true) location.replace("http://www.baidu.com") } }</script> </head><body> <input type="button" value="按钮"id="btn" /></body>

运行结果如下：

这里注意和assign的区别所在：

在assign上面的例子中，点击跳转后可以通过左上角的返回小箭头返回之前页面

而运行replace点击按钮跳转后，并没有返回的小箭头了，它是不可以返回的

可以避免产生跳转前的历史记录，无痕浏览跳转

- 写作不易，大家多多关注，谢谢啦-

---web分享，分享的不只是web

BOM - Location对象

相关推荐