方法 |
描述 |
| window.location.hostname | 返回 web 主机的域名 |
| window.location.pathname | 返回当前页面的路径和文件名 |
| window.location.port | 返回 web 主机的端口 |
| window.location.protocol | 返回所使用的 web 协议（ http: 或 https: ） |
| window.location.href | 返回当前页面的 |
console.log(window.location.hostname); console.log(window.location.pathname); console.log(window.location.port); console.log(window.location.protocol); console.log(window.location.href);
| 方法 | 描述 |
| window.location.replace(‘URL’) | 通过 location.replace 替换当前页面路径来实现页面跳转 |
| window.location.assign(‘URL’) | 通过 location.assign 加载新文档实现页面跳转 |
| window.location.href = ‘URL’ | 通过改变 location.href 来实现页面跳转 (常用) |
<button onclick="isHref()">通过 href 跳转</button> <button onclick="isReplace()">通过 replace 跳转</button> <button onclick="isAssign()">通过 assign 跳转</button> <script> function isHref(){ window.location.href = 'http://www.baidu.com'; } function isReplace(){ window.location.replace('http://www.baidu.com'); } function isAssign(){ window.location.assign('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>
