代码拉取完成,页面将自动刷新
今天使用百度时进了一个流氓网站, 点击浏览器后退键一直被重定向为指定的流氓网页 ;
蛮有意思, 拔拔代码看看并引申了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>
避免被流氓网页骚扰可以开启浏览器自带的安全过滤器, 或者直接关闭标签页, 又或者快速连续的多点击返回(后退)按键 ;