web-dev-qa-db-ja.com

JavaScriptでブラウザの戻る/進むボタンクリックイベントまたはハッシュ変更イベントをキャプチャする方法は？

ブラウザの戻るボタンまたは進むボタンがクリックされたとき、またはJavaScriptでハッシュが変更されたときにalert()したい。私は this ソリューションを試しましたが、機能していますが、Webページの他のリンクで問題が発生しており、リンククリックイベントで各リクエストを2回送信しています。

setInterval()関数を使用せずにキャプチャするソリューションはありますか？だから私はハッシュ変更または戻る/進むボタンクリックイベントをキャプチャする必要があります？最近のすべてのブラウザで機能する簡単なJavaScriptコード/関数/プロパティが必要です。

解決策はありますか？

ありがとう

javascriptbrowserbackforward
8
Student

良い考えではありません

この背後にある理由を説明できますか？私たちは皆、バック/フォワードなどを防止し、ブラウザ機能を操作するというこの道を進んできました。

ブラウザーに従い、そのようにアプリケーションを作成する方がよいので、これらのことは無関係になります。また、ブラウザがクライアントのJavaScriptアプリにロックするものが増えていることも事実であるため、ブラウザのアップグレード後にアプリが失敗する可能性が高くなります。

HTML5を使用する

HTML5履歴仕様 まさにあなたが求めているものかもしれません。これは、Ajaxアプリケーションとbrowser0のバック/フォワード機能に関して物事が機能し、実行される方法です。ぜひチェックしてみてください。 作業デモ を参照してください。これはかなりうまく機能します。

13
Robert Koritnik

これがRobertKoritnikが探していた答えだと思います。ここで見つけました： https://developers.google.com/tv/web/articles/location-hash-navigation

ロケーションハッシュが更新または変更されるたびに発生するイベント（window.onhashchange）があるため、JavaScriptを使用してイベントハンドラーを設定し、このイベントをリッスンし、ハッシュに基づいてコードを実行するだけです。これは基本的にそれが行われる方法です：

function getLocationHash() {
  return window.location.hash.substring(1);
}
window.onhashchange = function(e) {
  switch(getLocationHash()) {
    case 'state1': 
      execute code block 1;
      break;
    case 'state2':
      execute code block 2;
      break;
    default: 
      code to be executed if different from case 1 and 2;
  }
}

私はそれを私のサイトで動作させています： http://www.designhandler.com

それはすべて動的に変化するコンテンツです。まだajaxはありませんが、終了するとそうなります。私はまだwindow.location.hashを使用して、サイトの状態を追跡しています。サイトをナビゲートし、サイトが履歴に登録されたら戻るボタンを使用してナビゲートし始めると、後でページをリロードする必要はなく、ユーザーが実際にナビゲーションをクリックしているかのように状態が動的に変化します。

4
Damian

これはハッシュ用ですか、それともリダイレクト用ですか？あなたは何をしようとしているのですか？この種のアクションは通常、非常に煩わしいものです。

このために「onbeforeunload」イベントを試してみることをお勧めします ページを離れる前のjavascript

編集済み

実際、あなたが提供するリンクは非常に正確です。

var hash = location.hash;

setInterval(function()
{
   if (location.hash != hash)
   {
       hashUpdatedEvent(hash);
   }
}, 100);

function hashUpdatedEvent(hash)
{
     switch(...);
}

変更すると、リンクの重複アクションの問題が修正されます

<a href="javascript:void(0)" onclick="someFuncion()">Go for it</a>

function someFuncion()
{
   doWhatever();
   location.hash = 'somethingwasdone';
}

function hashUpdatedEvent(hash)
{
     if(hash == 'somethingwasdone')
     {
         doWhatever();
     }
}

ただ（ハッシュを更新し、「イベント」にアクションを処理させる）：

<a href="javascript:void(0)" onclick="someFuncion()">Go for it</a>

function someFuncion()
{
   location.hash = 'somethingwasdone';
}

function hashUpdatedEvent(hash)
{
     if(hash == 'somethingwasdone')
     {
         doWhatever();
     }
}
3
thexebolud

Javascriptは、ブラウザの戻る/進むボタンクリックイベントをキャプチャするためのイベントpopstateを提供します-

window.addEventListener("popstate", function(e) { 
  // if a back or forward button is clicked, do whatever, like alert or anything

  console.log('href => ', e.path[0].location.href);
  // href =>  https://testdomain.com/demos/material/admin-app/#!/app/dashboard

  console.log('hash => ', e.path[0].location.hash);
  //hash =>  #!/app/dashboard

  console.log('pathname => ', e.path[0].location.pathname);
  //pathname =>  /demos/material/admin-app/

});

続きを読む popstate

1
Praveen Poonia