3 Star 3 Fork 0

Raymond / 问题大全

 / 详情

history的replaceState与pushState方法实现 `pjax` | 流氓页面的实现原理(点击返回被强制重定向)

待办的
拥有者
创建于  
2018-12-16 19:02

今天使用百度时进了一个流氓网站, 点击浏览器后退键一直被重定向为指定的流氓网页 ;

蛮有意思, 拔拔代码看看并引申了pjax的原理 :

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <script src="https://cdn.bootcss.com/jquery/3.3.1/core.js"></script>
  <script>
    fnSpecify_PreviousPage({}, '', location.pathname);
    fnSpecify_PreviousPage({}, '', './index.html');

    function fnSpecify_PreviousPage(state, title, url) {
      // 关键词 : pjax 不刷新页面但改变url
      // 核心点 : pushState replaceState hashchange popstate 
      if ((typeof history.pushState != 'undefined')) {
        // 见: https://developer.mozilla.org/zh-CN/docs/Web/API/History_API
        // #A:
        // pushState()与 replaceState() 绝对不会触发 hashchange 事件,即使新的URL与旧的URL仅哈希不同也是如此。
        // 而 location.hrrf 是会触发 hashchange 的;

        // 注意 - 这2个方法中, Firefox现在忽略了这个title参数, 即: 在火狐中不能修改title:
        //   1 下面的demo, 第二个参数(title是空字符串, 是需要的(虽然火狐忽略title参数) :
        //      window.history.replaceState({page: 1}, '', '');
        //   2 只能用同域的URL替换

        // pushState()与 replaceState() 的第一个参数: 状态对象(state), 是一个Object ;
        //  可以通过: history.state 来获得 ;


        // 修改历史记录 : 将当前的页面在 历史记录 中的存在, 修改为指定的 链接(路由)
        // history.length 不变
        window.history.replaceState({}, '', '');

        // 新增历史记录 : 和 window.location = '?_' + (+new Date) 类型, 会在 历史记录 中新增这指定的 链接(路由) 
        //    但是和 window.location = '?_' + (+new Date) 不同的是:
        //        1 新的 URL 可以是与当前URL同源的任意URL 。而设置 window.location 仅当你只修改了哈希值时才保持同一个 document。
        //        2 如果需要,你可以不必改变URL。而设置 window.location = "#foo";在当前哈希不是 #foo 的情况下, 仅仅是新建了一个新的历史记录项。
        //        3 你可以为新的历史记录项关联任意数据。而基于哈希值的方式,则必须将所有相关数据编码到一个短字符串里。 
        //        4 假如 标题(title) 在之后会被浏览器用到,那么这个数据是可以被使用的(哈希则不然)。即: 可以修改title
        // history.length ++ 
        window.history.pushState({}, '', '?_' + (+new Date));

        // window.onpopstate = function (params1, params2, params3, params4) {
        //   // console.log(params1, params2, params3, params4);
        //   console.log(params2)
        // }

        // 当 一个窗口的 hash (URL 中 # 后面的部分)改变时就会触发 hashchange 事件
        // 具体的触发条件请查看: #A
        // IE8+
        window.onhashchange = function () {
          if (window.parent == window) {
            window.location.href = location.pathname;
          } else {
            window.top.location.href = location.pathname;
          }
        }
      }
    }
  </script>
</body>

</html>

避免被流氓网页骚扰可以开启浏览器自带的安全过滤器, 或者直接关闭标签页, 又或者快速连续的多点击返回(后退)按键 ;

评论 (0)

Raymond 创建了任务
Raymond 添加了
 
ES6
标签
Raymond 添加了
 
JavaScript
标签
Raymond 修改了描述
展开全部操作日志

登录 后才可以发表评论

状态
负责人
里程碑
Pull Requests
关联的 Pull Requests 被合并后可能会关闭此 issue
分支
开始日期   -   截止日期
-
置顶选项
优先级
参与者(1)
1259568 plqin 1578947587
JavaScript
1
https://gitee.com/PLQin/FE_ISSUE.git
git@gitee.com:PLQin/FE_ISSUE.git
PLQin
FE_ISSUE
问题大全

搜索帮助