它可以看做是我们浏览器的地址栏输入框,提供了当前窗口中加载文档的有关信息,还提供了一些导航功能。假设我们在地址栏中加上一个#1,再来刷新,就可以看到锚点出现了所谓锚点,就是我们在浏览网页时候,地址栏后面跟的 # 部分<script type="text/javascript"> window.onload= function(){ window.onclick= function(){ location.hash= "#666"; } } </script> IP:我们都知道电脑上网时都有IP,我们通过IP可以在全球找到这台电脑所使用的的网络地址端口号:正在使用网络的软件,在当前电脑内唯一的标识。也就是说,通过IP可以找到电脑,通过端口号可以找到我们电脑使用的网络软件。如果我们输出hostname是没有效果的,原因是因为我们是在本地加载页面的。例如,百度的www.baidu.com就是一个域名,我们通过终端来ping一下可以看到它找到一些IP,复制一下这个IP,到浏览器中可以看出输入IP和输入百度的地址显示出的效果是一样的我们来存放当前数据的时候呢,不止放在服务器中,还可能放在服务器中的某个文件中alert( location.pathname ); alert( location.protocol ); alert( location.search ); 如果是在地址栏中加上?username=xxx&age=23我们同样和设置锚点 # 那样也可以对这个进行设置:<script type="text/javascript"> window.onload =function(){ window.onclick= function(){ location.search= "?xxx=yyy&age=23" } } </script> 运行结果当我们点击页面任意处时,地址栏就会出现?后面的语句:从图上可以看出,在window中有个location对象,在document中也有一个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> protocol( 协议 ):host( 主机名 ):port( 端口号 )/pathname( 路径 )?search( 查询字符串 )#hash( 锚点 )http://www.baidu.com:8080/code/xxx.html?username=xxx&age=18#1关于这些例子我们要了解,在用到的时候能想到就OK了<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> <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时,强制加载,从服务器源头加载<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上面的例子中,点击跳转后可以通过左上角的返回小箭头返回之前页面而运行replace点击按钮跳转后,并没有返回的小箭头了,它是不可以返回的
|