JavaScript location.href 属性：设置或取得当前完整的 URL（页面跳转）_JavaScript基础教程

JavaScript location.href 属性

Location 对象的 href 属性用于设置或取得当前完整的 URL，语法如下：

location.href = URL

location.href 属性最常用于在 JavaScript 中进行页面的跳转（重定向），具体用法见下面的例子。

location.href 实例

例子 1

该例子通过 location.href 属性得到 URL 中的主机名称和端口号。

假设当前页面的 URL 是：http://www.5idev.com/p-javascript_location_href.shtml

<script type="text/javascript">

document.write(location.href);

</script>

运行该例子，输出：

http://www.5idev.com/p-javascript_location_href.shtml

例子 2

该例子通过 location.href 属性来设置新的 URL ：

假设当前页面的 URL 是：http://www.5idev.com/p-javascript_location_href.shtml

<html>

<script type="text/javascript">

function setHref(){
    location.href = "http://www.baidu.com";
}

</script>

<body>
<button onclick="setHref()">跳转到 baidu 首页</button>
</body>
</html>

运行该例子，点击跳转到 baidu 首页按钮，触发 setHref() 函数，浏览器地址栏的 URL 将变为：http://www.baidu.com，而浏览器也将重定向至百度首页。

实际使用中常常省略 href ，以下三种写法效果都是一样的：

location.href = "http://www.baidu.com";
location = "http://www.baidu.com";
window.location = "http://www.baidu.com";

例子 3

在该例子中，将使用相对路径来实现页面重定向功能：

<html>

<script type="text/javascript">

function setHref(){
    location.href = "p-javascript_location.shtml";
}

</script>

<body>
<button onclick="setHref()">跳转到新页面</button>
</body>
</html>

如果当前页面的 URL 是：http://www.5idev.com/p-javascript_location_href.shtml，那么点击跳转到新页面按钮，页面将转到：http://www.5idev.com/p-javascript_location.shtml

小结：location.href 设置的参数可以是完整的 URL ，也可以是相对当前页面的地址，也可以是相对网站根目录的地址。

参考阅读

XHTML 相对路径与绝对路径