JavaScript location对象用法详解

最新推荐文章于 2025-03-14 10:08:43 发布

xuxiaoping1989

最新推荐文章于 2025-03-14 10:08:43 发布

阅读量5.7k

点赞数

location基础知识

BOM（浏览器对象模型）中最有用的对象之一就是location，它是window对象和document对象的属性。location对象表示载入窗口的URL，此外，它还可以解析URL：
href    设置或返回完整的 URL。
protocol    设置或返回当前 URL 的协议,即双斜杠（//）之前的部分。
host    设置或返回主机名和当前 URL 的端口号。
hostname    设置或返回当前 URL 的主机名。
port    设置或返回当前 URL 的端口号。默认情况下，大多数URL没有端口信息（默认为80端口），所以该属性通常是空白的。像http://cardtest.ffan.com:8070/app/ffanbao/location.html这样的URL的port属性为8070.
pathname    设置或返回当前 URL 的路径部分。
hash    设置或返回从井号 (#) 开始的 URL（锚）。
search    设置或返回从问号 (?) 开始的 URL（查询部分）。
location.origin：协议名、主机名和端口号

例子：http://cardtest.ffan.com:8070/app/ffanbao/location.html?name=78&age=19#89

location.href是最常用的属性，用于获取或设置窗口的URL，改变该属性，就可以跳转到新的页面：

<script type="text/javascript">  
    location.href = "http://www.sunchis.com";  
</script>

上面代码的作用是：打开页面后将会跳转到http://www.sunchis.com的页面。
assign()方法也可实现上述操作：

<script type="text/javascript">  
    location.assign("http://www.sunchis.com");  
</script>

如果不想让包含脚本的页面能从浏览器的历史记录中访问，replace()方法可以做到这一点。replace()方法所做的操作与assign()方法一样，但它多了一步操作，即从浏览器的历史记录中删除了包含脚本的页面，这样就不能通过浏览器的后退按钮和前进按钮来访问它了，assign()方法却可以通过后退按钮来访问上个页面。你可以自己测试一下这段关于replace()方法的代码：

<html>
    <head>
        <title>不能访问此页面的历史页面</title>
    </head>
    <body>
        <p>测试一下效果，请等待一秒钟……</p>
        <p>然后点击浏览器的“后退按钮”，你会发现什么？</p>
        <script type="text/javascript">
            setTimeout(function(){  
                location.replace("http://www.sunchis.com");  
            },1000);  
        </script>
    </body>
</html>

location对象还有个reload()方法，可以重新载入当前页面。reload()方法有两种模式，即从浏览器的缓存中重载，或从服务器端重载。究竟采用哪种模式由该方法的参数决定。
false：从缓存中重新载入页面；
true：从服务器重新载入页面；
无参数：从缓存中载入页面，如果参数省略，默认值为false。

注意：
在reload()方法执行后，再其后面的代码可能被执行，也可能不被执行，这由网络延迟和系统资源因素决定。因此，最好把reload()的调用放在代码的最后一行。
文章的一开始就提到location是window对象和document对象的属性，因此，window.location和document.location是等价的，可以交互使用。

location.origin兼容IE （IE11+才有origin属性）

if (window["context"] == undefined) {
    if (!window.location.origin) {
        window.location.origin = window.location.protocol + "//" + window.location.hostname + 
(window.location.port ? ':' + window.location.port: '');
    }
    window["context"] = location.origin+"/V6.0";
}