ユーザーが「戻る」ボタンをクリックしたかどうかを検出する - モバイルブラウザ

Question

私は非常に奇妙な要件を持っています。

要件は言う：製品の画像は、モバイル、商品詳細ページでブラウザ上backボタンを押すことで、その後のライトボックスで開かれている製品の詳細ページで、示さなければならない

そうではなく、前のページ、すなわち製品のグリッドページクロスブラウザーで戻るボタンを処理する方法を調べることを考えました。

if (window.history && window.history.pushState) { 

$(window).on('popstate', function() { 
    var hashLocation = location.hash; 
    var hashSplit = hashLocation.split("#!/"); 
    var hashName = hashSplit[1]; 

    if (hashName !== '') { 
    var hash = window.location.hash; 
    if (hash === '') { 
     alert('Back button was pressed.'); 
    } 
    } 
}); 

この同様

window.onbeforeunload = function (e) { 
     var e = e || window.event; 
     var msg = "" 
     $("#blueimp-gallery").hide(); 
     // For IE and Firefox 
     if (e) { 
      e.returnValue = msg; 
     } 

     // For Safari/chrome 
     return msg; 
    }; 

Answer 1

をしようとしました：また、これは試してみました

window.onload = function() { 
if (typeof history.pushState === "function") { 
    history.pushState("jibberish", null, null); 
    window.onpopstate = function() { 
     history.pushState('newjibberish', null, null); 
     // Handle the back (or forward) buttons here 
     // Will NOT handle refresh, use onbeforeunload for this. 
    }; 
} 
else { 
    var ignoreHashChange = true; 
    window.onhashchange = function() { 
     if (!ignoreHashChange) { 
      ignoreHashChange = true; 
      window.location.hash = Math.random(); 
      // Detect and redirect change here 
      // Works in older FF and IE9 
      // * it does mess with your hash symbol (anchor?) pound sign 
      // delimiter on the end of the URL 
     } 
     else { 
      ignoreHashChange = false; 
     } 
    }; 
    } 
}; 

：私は解決策の下にしようとしたいくつかのソリューションは、デスクトップのブラウザで働いていたが、どれもMobile Browsers

で働いていません

あなたが間違いなく学んだように、onbeforeunloadは、ナビゲーションイベントをキャンセルする方法を提供します（開始するには、this answerを参照してください）。ただし、すべてのブラウザで常に機能するとは限りません（多くの場合、理由）。あなたがまだ持っていなければ、これを最初に与えてください。あなたの現在のコード例では、歴史の操作だけで取り消しを試みることはありません。

ハッシュルーティングを使用すると、URLハッシュをユニークなビュールート（Angular、Reactなど）に管理し、変更をhistoryにプッシュするライブラリを介して、これが役立つ可能性があります。モーダル状態に一意のURLを付けると（通常は私の経験では行われません）、ページをリロードするのではなく、「戻る」を実行するとモーダルを閉じるだけです。