地址信息:
(1):返回 web 主机的域名:window.location.hostname
console.log(window.location.hostname);
(2):返回当前页面的路径和文件名:window.location.pathname
console.log(window.location.pathname);
(3):返回 web 主机的端口:window.location.port
console.log(window.location.port);
(4):返回所使用的 web 协议(http: 或 https:):window.location.protocol
console.log(window.location.protocol);
(5):返回当前页面的 URL 地址:window.location.href
console.log(window.location.href);
页面跳转:
(1)通过 location.replace 替换当前页面路径来实现页面跳转:window.location.replace(‘URL’)
<button onclick="isReplace()">通过 replace 跳转</button> <script> function isReplace(){ window.location.replace('http://www.baidu.com'); } </script>
(2)通过 location.assign 加载新文档实现页面跳转:window.location.assign(‘URL’)
<button onclick="isAssign()">通过 assign 跳转</button><script> <script> function isAssign(){ window.location.assign('http://www.baidu.com'); } </script>
(3)通过改变 location.href 来实现页面跳转 常用:window.location.href = ‘URL’
<button onclick="isHref()">通过 href 跳转</button> <script> function isHref(){ window.location.href = 'http://www.baidu.com'; } </script>
跳转传参(重点):
跳转传参指在页面跳转时,将部分数据拼接到 URL 路径上,一并跳转到另一个页面上。
<button onclick="isHref()">通过 href 跳转</button> <script> let id = 10; function isHref(){ window.location.href = 'index.html?'+id; } </script>
另一页面可以通过 window.location.search 接收此参数。并配合 slice 将多余符号切割掉。
<script> console.log(window.location.search); // ?10 需要将?切割掉 console.log(window.location.search.slice(1)); // 10 </script>