[关闭]
@Wangww0925 2019-08-07T07:57:58.000000Z 字数 4574 阅读 277

url链接

js

以下获取该页面的信息
https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&rsv_idx=1&ch=&tn=baidu&bar=&wd=aaa&oq=aaa&rsv_pq=80b6ca6f0005090b&rsv_t=ef24r8276t5%2BBv9dp0UDhgkLr2HlH1J1Q7Z0ufXNBDS1%2BWsJEX8zKvGEB00&rqlang=cn&rsv_enter=1&inputT=5

获取当前链接（带参数） window.location.href

  1. window.location.href
  3. // "https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&rsv_idx=1&ch=&tn=baidu&bar=&wd=aaa&oq=aaa&rsv_pq=80b6ca6f0005090b&rsv_t=ef24r8276t5%2BBv9dp0UDhgkLr2HlH1J1Q7Z0ufXNBDS1%2BWsJEX8zKvGEB00&rqlang=cn&rsv_enter=1&inputT=5"

返回当前 URL 的路径部分 window.location.pathname

  1. window.location.pathname
  3. // "/s"

获取上一个页面的url链接（不带参数） document.referrer

  1. document.referrer
  3. "https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&rsv_idx=1&ch=&tn=baidu&bar=&wd=aaa&rn=&oq=&rsv_pq=84c74a9d00003288&rsv_t=39399rY%2BDq314ojIOFeeRPKZ1BcnXwLeppr7QmgX7z8F82gwhaRZwar79jw&rqlang=cn&rsv_enter=1&inputT=54121"

不刷新页面修改url链接

  1. history.pushState(state, title, url)
  3. history.replaceState(status,title, url)
  5. window.location.hash

pushState 跟 replaceState 的参数：

state： 对象，可以存存放一些数据表示当前状态。当浏览器执行前进后退操作时触发onpopstate事件，state将成为event的子对象，可通过event.state获取先前状态。但是注意state中的属性值不能为引用类型对象，会报ObjectCloneError（对象克隆异常），例如允许{data: "test"}，不允许{data: document.querySelector('#testId')}。

title： 目前无特殊意义，一般可以传入 document.title 或 ""(空字符串)。

url： 要替换的url，如果是pushState则会添加一条历史记录，不允许跨域。

pushState 跟 replaceState 的区别：

pushState会在浏览器中创建一条新历史纪录，而replaceState仅替换当前地址

方法一： history.pushState(state, title, url)

注意：window.onpopstate
history.go和history.back（包括用户按浏览器历史前进后退按钮）触发，并且页面无刷的时候（由于使用pushState修改了history）会触发popstate事件，事件发生时浏览器会从history中取出URL和对应的state对象替换当前的URL和history.state。通过event.state也可以获取history.state。

demo

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>yellow</title>
  6.     <style>
  7.         .bg-org{
  8.             background-color: orange;
  9.         }
  10.         .bg-blue{
  11.             background-color: blue;
  12.         }
  13.     </style>
  14. </head>
  15. <body class="bg-org">
  16.     <button onclick="toggleState()">hash</button>
  18.     <script>
  19.         var body = document.body
  21.         function toggleState(e) {
  22.             var flag = body.className == 'bg-org' ? 'bg-blue' : 'bg-org'; // 获取类名
  24.             history.pushState({title: flag}, flag, location.pathname + '?state=' + flag.split('-')[1]); // 更改url
  26.             body.className = flag; // 重新赋值类名
  27.         } 
  29.         // 监听popstate事件
  30.         history.pushState && window.addEventListener("popstate", function(e) {
  31.             // 获取history.state对象中的状态信息
  32.             // 在这里state将自动成为event的子对象，可直接通过event.state访问
  33.             var flag = e.state && e.state.title;
  35.             body.className = flag || (body.className=='bg-org'?'bg-blue':'bg-org');
  36.         })
  37.     </script>
  38. </body>
  39. </html>

方法二： history.replaceState(status,title, url)

demo

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>yellow</title>
  6.     <style>
  7.         .bg-org{
  8.             background-color: orange;
  9.         }
  10.         .bg-blue{
  11.             background-color: blue;
  12.         }
  13.     </style>
  14. </head>
  15. <body class="bg-org">
  16.     <button onclick="toggleState()">hash</button>
  18.     <script>
  19.         var body = document.body
  21.         function toggleState(e) {
  22.             var flag = body.className == 'bg-org' ? 'bg-blue' : 'bg-org'; // 获取类名
  24.             history.replaceState({title: flag}, flag, location.pathname + '?state=' + flag.split('-')[1]); // 更改url
  26.             body.className = flag; // 重新赋值类名
  27.         }
  28.     </script>
  29. </body>
  30. </html>

方法三： window.location.hash

demo

PS： URL中 # 称为位置的标识符，代表网页中的一个位置，当浏览器读取这个URL后，会自动将可视区域滚动至所定义的锚点处。HTTP请求中不包括 # ，也就是说改变 # 后的内容不会向服务器发起请求，因此也就不会引起页面重载
当 # 值发生变化时，就会触发 onhashchange事件

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>yellow</title>
  6.     <style>
  7.         .bg-org{
  8.             background-color: orange;
  9.         }
  10.         .bg-blue{
  11.             background-color: blue;
  12.         }
  13.     </style>
  14. </head>
  15. <body class="bg-org">
  16.     <button onclick="toggleState()">hash</button>
  18.     <script>
  19.         function toggleState(e) {
  20.             var body = document.body
  21.             var flag = body.className == 'bg-org' ? 'bg-blue' : 'bg-org'; // 获取类名
  23.             location.hash = flag.split('-')[1]; // 更改url
  25.             body.className = flag; // 重新赋值类名
  27.             console.log(location.hash)
  28.         }  
  29.     </script>
  30. </body>
  31. </html>

刷新修改url链接 window.location

demo

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>yellow</title>
  6.     <style>
  7.         .bg-org{
  8.             background-color: orange;
  9.         }
  10.         .bg-blue{
  11.             background-color: blue;
  12.         }
  13.     </style>
  14. </head>
  15. <body class="bg-org">
  16.     <button onclick="toggleState()">hash</button>
  18.     <script>
  19.         var body = document.body
  20.         body.className = 'bg-' + getUrlParam('state'); // 获取状态值
  22.         function toggleState(e) {
  23.             var flag = body.className == 'bg-org' ? 'bg-blue' : 'bg-org'; // 获取类名
  25.             window.location = location.pathname + '?state='+ flag.split('-')[1]; // 更改url
  27.             body.className = flag; // 重新赋值类名
  28.         }
  31.         /**
  32.          * 获取url参数
  33.          * @param  {String} name 参数名
  34.          * @return {String}      参数值
  35.          */
  36.         function getUrlParam(name){
  37.             var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
  39.             var value = window.location.search.substr(1).match(reg);
  41.             return value == null ? '' : decodeURI(value[2]);
  42.         }
  43.     </script>
  44. </body>
  45. </html>

作者 wendy
2019 年 1月 8日

参考文献

改变url

添加新批注
在作者公开此批注前，只有你和作者可见。
回复批注