览网页时，当从A页面点击跳转到B页面后，一般情况下，可以点击浏览器上的“后退”按钮返回A页面。

如果进入B页面后，B页面想让访问者留下，禁止返回，是否可以实现呢？

这简直是要控制浏览器的行为，虽然有些邪恶，但确实可以实现，使用特殊的JavaScript代码就可实现。

方法如下：

实现原理：

监听浏览器的popstate事件，该事件会在用户点击浏览器的回退按钮时被触发。

然后，使用History.pushState()方法向当前浏览器会话的历史堆栈中添加一个陷阱状态，该状态会使“回退”操作无效。

JS源码：

<script>

//浏览器返回键事件

pushHistory();

window.addEventListener("popstate", function(e) {

//判断移动端

var userAgentInfo = navigator.userAgent;

var Agents = new Array("Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod");

var equipmentType = false;

for (var v = 0; v < Agents.length; v++) {

if (userAgentInfo.indexOf(Agents[v]) != -1) {

equipmentType = true;

break;

}

}

if (equipmentType) {

$("#mask-back").show();

$("#mask-back .back-close").on("click", function() {

$("#mask-back").hide();

})

}

pushHistory(); //注，此处调用，可以让用户一直停留着这个页面

}, false);

function pushHistory() {

var stateeee = {

title: "title",

url: "#"

};

window.history.pushState(stateeee, "title", "#");

}

</script>

测试方法：

建立两个文件：a.html、b.html。

a文件内容简单写一句代码：

<a href="b.html">goto b.html</a>。

b文件内容写入上面的源码。

打开a页面，点击链接进入b页面，这时再点击浏览器上的“后退”按钮，会发现：操作无效，无法后退。

提升强度：

这个黑暗的技巧，虽然使用了不常见的技术方法，但查看页面源码很容易发现其实现原理。

为了保护代码、防止代码被分析，可以对上面的JavaScript代码加密，加密使用JShaman。

进入JShaman官网，贴入代码：

在配置中，勾选“字符串加密”：

然后生成混淆加密的JavaScript代码：

复制粘贴回b文件：

这时，代码成为加密状态，虽然不影响运行，是万万不可能了。

由采用的go-router路由框架：

final rootNavigatorKey = GlobalKey<NavigatorState>();
final GoRouter routerGlobal = GoRouter(
  errorBuilder: (context, state) {
    return const ErrorPage();
  },
  navigatorKey: rootNavigatorKey,
  routes: <RouteBase>[
    GoRoute(
        path: '/',
        name: "login",
        parentNavigatorKey: rootNavigatorKey,
        builder: (BuildContext context, GoRouterState state) {
          return const LoginPage();
        }),
     //......省略部分路由
    GoRoute(
        path: '/error',
        name: "error",
        parentNavigatorKey: rootNavigatorKey,
        builder: (BuildContext context, GoRouterState state) {
          return const ErrorPage();
        }),
  ],
);

首先在runApp(MyApp()）前添加以下代码：

需要导入dart:html包，由于只能在web中使用，跨平台可以使用universal_html: ^1.2.1代替

if (kIsWeb) {
  // 清空浏览器历史记录
  html.window.history.replaceState(null, "", html.window.location.href);
  // 禁止后退功能
  html.window.onPopState.listen((event) {
    html.window.history.pushState(null, "", html.window.location.href);
  });
}

添加上面代码后，经过测试还是会后退一步，每当打开一个新的路由后需要再次调用下面代码：

GoRouter.of(context).go(menu.location!);
 if (kIsWeb) {
      html.window.history.replaceState(null, "", "#$location");
   }                     

当点击浏览器后退按钮时，地址栏地址将不再发生变化：

var topBtn = document.getElementById('top');
// 获取视窗高度
var winHeight = document.documentElement.clientHeight;
window.onscroll = function () {
    // 获取页面向上滚动距离，chrome浏览器识别document.body.scrollTop，而火狐识别document.documentElement.scrollTop，这里做了兼容处理
    var toTop = document.documentElement.scrollTop || document.body.scrollTop;
    // 如果滚动超过一屏，返回顶部按钮出现，反之隐藏
    if(toTop>=winHeight){
        topBtn.style.display = 'block';
    }else {
        topBtn.style.display = 'none';
    }
}
topBtn.onclick=function () {
    var timer = setInterval(function () {
        var toTop = document.documentElement.scrollTop || document.body.scrollTop;
        // 判断是否到达顶部，到达顶部停止滚动，没到达顶部继续滚动
        if(toTop == 0){
            clearInterval(timer);
        }else {
            // 设置滚动速度
            var speed = Math.ceil(toTop/5);
            // 页面向上滚动
            document.documentElement.scrollTop=document.body.scrollTop=toTop-speed;
        }
    },50);
}