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()
加载新文档
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>