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
(0)

相关推荐