JavaScript Window Location

Location 对象

JavaScript Location 对象用于获取或设置当前的 URL 信息。Location 对象是 window 对象的一部分,可通过 window.location 属性对其进行访问。

Location 对象常用于得到 URL 地址中的信息,或者刷新当前页面,页面重定向等,具体可见下面列出的各属性和方法。

Location 对象属性


属性                             描述


location.hash    设置或取得 URL 中的锚    

location.host    设置或取得 URL 中主机(包括端口号)    

location.hostname    设置或取得 URL 中的主机名    

location.href    设置或取得完整 URL(页面重定向应用)    

location.pathname    设置或取得 URL 中的路径    

location.port    设置或取得 URL 中的端口号    

location.protocol    设置或取得 URL 使用的协议    

location.search    设置或取得 URL 中的查询字串(一般是 ? 符号后面的内容)    

Location 对象方法

History 对象有如下 3 个方法:

location.assign():加载新页面文档

location.reload():重新加载(刷新)当前页面

location.replace():用新的文档替代当前文档

JavaScript location.href 属性

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

location.href = URL

location.href 属性最常用于在 JavaScript 中进行页面的跳转(重定向)

返回(当前页面的)整个 URL:

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<script type="text/javascript">
document.write(location.href);
</script>
</head>
<body>
</body>
</html>

JavaScript location.pathname 属性

Location 对象的 pathname 属性用于设置或取得当前 URL 的路径部分,语法如下:

location.pathname = path

返回当前 URL 的路径名:

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<script type="text/javascript">
document.write(location.pathname);
</script>
</head>
<body>
</body>
</html>

JavaScript location.assign() 方法

Location 对象的 assign() 方法用于加载一个新的文档,语法如下:

location.assign(URL)

加载一个新的文档:

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<script type="text/javascript">
function setAssign(){
window.location.assign("http://www.php.cn");
}
</script>
</head>
<body>
  <button onclick="setAssign()">加载新文档</button>
</body>
</html>


继续学习
||
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <script type="text/javascript"> function setAssign(){ window.location.assign("http://www.php.cn"); } </script> </head> <body> <button onclick="setAssign()">加载新文档</button> </body> </html>
提交重置代码
章节
笔记
提问
课件
反馈
捐赠

JavaScript学习指南