JavaScript location对象的用法（附带实例）

JavaScript 中的 location 对象是 window 对象的一部分，可以通过 window.location 属性来访问。它包含有关当前 URL（Uniform Resource Locator，统一资源定位系统）的信息。

JavaScript location对象的常用属性

href 是 location 对象最常用的一个属性，用于这是或者返回完整的 URL。

href 属性是一个可读、可写的字符串，可设置或返回当前文档的完整 URL。因此，可以通过为该属性设置新的 URL，使浏览器跳转。

【实例】自动跳转页面。

<button>点击直接跳转</button>
<div>您将在 5 秒后跳转到C语言中文网官网</div>
<script>
    var btn = document.querySelector('button');
    var div = document.querySelector('div');
    btn.addEventListener('click', function() {
        location.href = 'https://c.biancheng.net/';
    })
    var timer = 4;
    setInterval(function() {
        if (timer == 0) {
            location.href = 'https://c.biancheng.net/';
        } else {
            div.innerHTML = '您将在' + timer + '秒后跳转到C语言中文网官网';
            timer--;
        }
    }, 1000);
</script>

程序的功能是单击“点击直接跳转”按钮，页面立刻跳转至 location 对象的 href 属性设置的 URL。如果不单击按钮，则会在 5 秒后自动跳转。

在程序中，第 7 行和第 12 行代码通过 location 对象的 href 属性设置 URL，使浏览器跳转。程序在 Chrome 浏览器中的运行结果如下图所示。

JavaScript location对象的常用方法

location 对象的常用方法如下表所示：

表：location 对象的常用方法

方法	描述
assign	加载一个新的文档
reload	重新加载当前文档
replace	用新的文档替换当前文档

1) assign 方法可加载一个新的文档。语法格式如下：

location.assign(URL)

参数 URL 是网络地址。

示例代码如下：

location.assign("https://c.biancheng.net/")

示例代码的功能是加载 C语言中文网的首页。

2) reload 方法用于重新加载当前文档。语法格式如下：

location.reload(force)

如果该方法没有规定参数，或者参数是 false，它就会用 HTTP 头来检测服务器上的文档是否已改变。如果文档已改变，reload 会再次下载该文档；如果文档未改变，则该方法将从缓存中装载文档。

如果把该方法的参数设置为 true，那么无论文档的最后修改日期是什么，它都会绕过缓存，从服务器上重新下载该文档。

示例代码如下：

location.reload()

示例代码的功能是重新加载当前文档，相当于“刷新”功能。

3) replace 方法用一个新文档取代当前文档。语法格式如下：

location.replace(newURL)

参数 newURL 表示网络地址。

示例代码如下：

location. replace ("https://c.biancheng.net/")

示例代码的功能是加载 C语言中文网首页。replace() 方法不会在 history 对象中生成一个新的记录，因此不可以后退。