腾讯云618限量抢购

JavaScript location.href 属性:设置或取得当前完整的 URL(页面跳转)

最后更新:2012-06-17 22:54阅读:48311

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 ,也可以是相对当前页面的地址,也可以是相对网站根目录的地址。

参考阅读

  1. XHTML 相对路径与绝对路径

本章节内容共分 12 部分:
  1. 1. JavaScript Location 对象:获取或设置当前的 URL 信息
  2. 2. JavaScript location.hash 属性:设置或取得当前 URL 中的锚
  3. 3. JavaScript location.host 属性:设置或取得当前 URL 的主机名称和端口号
  4. 4. JavaScript location.hostname 属性:设置或取得当前 URL 的主机名
  5. 5. JavaScript location.href 属性:设置或取得当前完整的 URL(页面跳转)
  6. 6. JavaScript location.pathname 属性:设置或取得当前 URL 的路径部分
  7. 7. JavaScript location.port 属性:设置或取得当前 URL 的端口
  8. 8. JavaScript location.protocol 属性:设置或取得当前 URL 的协议
  9. 9. JavaScript location.search 属性:设置或取得当前 URL 的查询字串
  10. 10. JavaScript location.assign() 方法:加载一个新的文档
  11. 11. JavaScript location.reload() 方法:重新加载当前文档(刷新页面)
  12. 12. JavaScript location.replace() 方法:加载一个新文档(页面)替换当前文档
腾讯云618限量抢购