覽網頁時，當從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);
}