JavaScript 窗口位置


目录

    显示目录


window.location 对象可用于获取 当前页面地址 (URL) 并将浏览器重定向到新页面。


窗口位置

window.location 对象可以不带 window 前缀。

一些例子:

  • window.location.href 返回当前页面的 href (URL)

  • window.location.hostname 返回网络主机的域名

  • window.location.pathname 返回当前页面的路径和文件名

  • window.location.protocol 返回使用的 Web 协议(http:或 https:)

  • window.location.assign() 加载新文档


窗口位置 Href

window.location.href 属性返回当前页面的 URL。

例子

显示当前页面的href(URL):

document.getElementById("demo").innerHTML =
"Page location is " + window.location.href;

结果是:

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript</h2>

<h3>The window.location object</h3>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = 
"The full URL of this page is:<br>" + window.location.href;
</script>

</body>
</html>

窗口位置主机名

window.location.hostname 属性返回(当前页面的)互联网主机的名称。

例子

显示主机名:

document.getElementById("demo").innerHTML =
"Page hostname is " + window.location.hostname;

结果是:

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript</h2>

<h3>The window.location object</h3>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = 
"Page hostname is: " + window.location.hostname;
</script>

</body>
</html>


窗口位置路径名

window.location.pathname 属性返回以下路径名 当前页面。

例子

显示当前URL的路径名:

 document.getElementById("demo").innerHTML =
"Page path is " + window.location.pathname;

结果是:

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript</h2>

<h3>The window.location object</h3>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML =
"Page path is: " + window.location.pathname;
</script>

</body>
</html>

窗口定位协议

window.location.protocol 属性返回页面的 Web 协议。

例子

显示网络协议:

document.getElementById("demo").innerHTML =
"Page protocol is " + window.location.protocol;

结果是:

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript</h2>

<h3>The window.location object</h3>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML =
"The page protocol is: " + window.location.protocol;
</script>

</body>
</html>

窗口 位置 端口

window.location.port 属性返回互联网主机的编号 (当前页面的)端口。

例子

显示主机名:

document.getElementById("demo").innerHTML =
"Port 
  number is " + window.location.port;

结果是:

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript</h2>

<h3>The window.location object</h3>

<p id="demo"></p>

<p><b>Note: </b>If the port number is default (80 for http and 443 for https), most browsers will display 0 or nothing.</p>

<script>
document.getElementById("demo").innerHTML = 
"The URL port number of the current page is: " + window.location.port;
</script>

</body>
</html>

大多数浏览器不会显示默认端口号(http 为 80,https 为 443)


窗口位置分配

window.location.assign() 方法加载一个新文档。

例子

加载新文档:

<html>
<head>
<script>
function newDoc() {
  window.location.assign("https://www.w3schools.com")
 }
</script>
</head>
<body>

<input type="button" value="Load new document"
onclick="newDoc()">

</body>
</html>

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript</h2>

<h3>The window.location object</h3>

<input type="button" value="Load new document" onclick="newDoc()">

<script>
function newDoc() {
  window.location.assign("https://www.w3schools.com")
}
</script>

</body>
</html>