ハッシュナビゲーションを使用しているときに同じアドレスへのリダイレクトを検出するにはどうすればよいですか？

Question

This questionは私が考えているもののようなものですが、答えはありません。私はAjaxを介してサーバからの部分的なHTMLコンテンツをダウンロードするには、このイベントを使用して、ブラウザが変更を検出したときに、それが呼び出される

$(window).on('hashchange', function() { 
    loadContent(location.hash.slice(1)); 
}).trigger('hashchange'); 

：

は、私は成功し、次のコードを使用して、自分のアプリケーションでハッシュナビゲーションを実装していますアドレスバーのハッシュにアドレスは次のようになります。

https://www.mywebsite.com/#/account/login

問題があり、リンクは、それが（明白な理由のために）なhashchangeイベントを発生しません同じであるとき。ページを更新するには、loadContentという関数を呼び出す必要があります。

たとえば、ハッシュナビゲーションを実装する前に、ユーザーがページに加えたすべての変更を破棄したい場合は、単にシステムメニューの同じリンクをクリックするか、アドレスバーをクリックしてEnterキーを押します。その後、ブラウザは同じページにリダイレクトされ、すべての変更がドロップされます。

しかし、私はそれを検出できません。これらのコマンドを検出してloadContent(location.hash.slice(1));の機能を呼び出すには、どうすればよいですか？

Answer 1

いくつかの調査の後、私はそれを行う方法がないと結論づけます。私はthis questionが鉱山に非常に近いことを発見しましたが、サイト上のすべてのリンク上で "onclick"イベントを処理する以外の有用な答えもありませんでした。非常に美しい解決策ではなく、アドレスバーの入力を打つ機能を解決しません。

私は別のアプローチで終わりました。間違いなく、私が望んでいた方法を解決することはできませんが、私はそれがコードの観点からはよりエレガントで、ユーザーの視点からは実用的だと思います。それは単純なアプローチかもしれ

function doc_keyUp(e) { 
    if (e.altKey && e.keyCode === 82) { // ALT + R 
     if (confirm("Discard changes and refresh the page?")) { 
      loadContent(location.hash.slice(1)); 
     } 
     return false; 
    } 
} 

document.addEventListener('keyup', doc_keyUp, false); 

Answer 2

ていますが、プロパティに、あなたの現在のハッシュをどのように保存した場合、その後、クリックイベントを登録し、ハッシュはまだ同じであるかどうかを確認：私はページを更新するために、キーボードショートカットを作成しますか？

ここには（テストされていない）例があります。しかし、あなたはその考えを得るべきです。

var storedHash = document.location.hash; 

// You may add a data attribute to corresponding links to not 
// catch all 'a'-tags (i.e. document.querySelectorAll('a[data-nav=true]')) 
var links = document.querySelectorAll('a'); 

for (var i in links) { 

    if (!links.hasOwnProperty(i)) { 
     continue; 
    } 

    links[i].addEventListener('click', function() { 
     if (document.location.hash === storedHash) { 
      // Here comes your logic 
     } 
    }); 

}