Javascriptの質問です。

ページ内のアンカーリンクで以下のように遷移したとします。

index.html#aaa→index.html#bbb→index.html#ccc

このとき、最後のindex.html#cccから、ブラウザのバックボタンを押して、
index.html#ccc→index.html#bbb
と戻ったときにある関数A(bbb)を呼び出したいのですが、
それは可能でしょうか?

アンカーリンクの場合、ページがリフレッシュされないので、ハンドラを何にすればいいのか検討がつきません。

よろしくお願いします。

回答の条件
  • 1人3回まで
  • 登録:2006/06/19 21:42:26
  • 終了:2006/06/20 01:22:50

ベストアンサー

id:backupper No.2

backupper回答回数95ベストアンサー獲得回数102006/06/20 00:59:39

ポイント50pt

イベントが思いつかないので、タイマでlocation.hashの変化をポーリングしてみてはどうでしょう?

HashChange.prototype.hookに無名関数を定義すると、イベントの補足後に好みの処理を実行できます。

#cccから#bbbに限定したい場合は、listenメソッドで条件分岐すれば対応できると思います。

<html>
<head>
<title>question:1150720943</title>
<script type="text/javascript">
function HashChange() {
  this.hashValue = "";
  this.listen = function () {
    if (location.hash != this.hashValue) {
      this.hashValue = location.hash;
      this.hook();
    }
  }
}
HashChange.prototype.hook = function () {
  alert('hook');
}
he = new HashChange();
window.setInterval('he.listen()', 500);
</script>
</head>
<body>
<h1><a name="p1">p1</a><a href="#p2">#p2</a></h1>
<h1><a name="p2">p2</a><a href="#p3">#p3</a></h1>
<h1><a name="p3">p3</a><a href="#p4">#p4</a></h1>
<h1><a name="p4">p4</a><a href="#p5">#p5</a></h1>
<h1><a name="p5">p5</a><a href="#p6">#p6</a></h1>
<h1><a name="p6">p6</a><a href="#p7">#p7</a></h1>
<h1><a name="p7">p7</a><a href="#p8">#p8</a></h1>
<h1><a name="p8">p8</a><a href="#p9">#p9</a></h1>
<h1><a name="p9">p9</a><a href="#p1">#p1</a></h1>
</body>
</html>
id:iiiiiiiii

ありがとうございます。

やはりそうなりますよね。

監視し続けるのは処理が重いかなと思って、敬遠していましたが、それが一番現実的なのかも知れないですね。ありがとうございます。

書いていただきましたものを試してみましたが、CPU使用率も10%もいかないようなので、これでいけそうです。ありがとうございました。

2006/06/20 01:22:17

その他の回答(1件)

id:skky No.1

skky回答回数98ベストアンサー獲得回数42006/06/19 23:05:37

ポイント20pt

ページがリフレッシュしても構わなければ

index.html?dummy=aaa#aaa→

index.html?dummy=bbb#bbb→

index.html?dummy=ccc#ccc

とすれば別URLと認識してリフレッシュするので

body onLoadをイベントハンドラにすれば良いと思います。

#dummy=は無視されて何も処理されません。

id:iiiiiiiii

リフレッシュしてはまずいんです。

すみませんが、他の方法はありませんでしょうか?

2006/06/20 00:11:23
id:backupper No.2

backupper回答回数95ベストアンサー獲得回数102006/06/20 00:59:39ここでベストアンサー

ポイント50pt

イベントが思いつかないので、タイマでlocation.hashの変化をポーリングしてみてはどうでしょう?

HashChange.prototype.hookに無名関数を定義すると、イベントの補足後に好みの処理を実行できます。

#cccから#bbbに限定したい場合は、listenメソッドで条件分岐すれば対応できると思います。

<html>
<head>
<title>question:1150720943</title>
<script type="text/javascript">
function HashChange() {
  this.hashValue = "";
  this.listen = function () {
    if (location.hash != this.hashValue) {
      this.hashValue = location.hash;
      this.hook();
    }
  }
}
HashChange.prototype.hook = function () {
  alert('hook');
}
he = new HashChange();
window.setInterval('he.listen()', 500);
</script>
</head>
<body>
<h1><a name="p1">p1</a><a href="#p2">#p2</a></h1>
<h1><a name="p2">p2</a><a href="#p3">#p3</a></h1>
<h1><a name="p3">p3</a><a href="#p4">#p4</a></h1>
<h1><a name="p4">p4</a><a href="#p5">#p5</a></h1>
<h1><a name="p5">p5</a><a href="#p6">#p6</a></h1>
<h1><a name="p6">p6</a><a href="#p7">#p7</a></h1>
<h1><a name="p7">p7</a><a href="#p8">#p8</a></h1>
<h1><a name="p8">p8</a><a href="#p9">#p9</a></h1>
<h1><a name="p9">p9</a><a href="#p1">#p1</a></h1>
</body>
</html>
id:iiiiiiiii

ありがとうございます。

やはりそうなりますよね。

監視し続けるのは処理が重いかなと思って、敬遠していましたが、それが一番現実的なのかも知れないですね。ありがとうございます。

書いていただきましたものを試してみましたが、CPU使用率も10%もいかないようなので、これでいけそうです。ありがとうございました。

2006/06/20 01:22:17
  • id:skky
    これは良問ですね。勉強になります。
    やはりタイマーしかないんでしょうか。

    もっとストレートなやり方がありそうな気がするので
    質問は終わりましたが誰かコメントしてくれるといいですね。
  • id:lains_you
     アンカーリンク遷移時、Scrollイベントが発生するので、一応
    onScrollでトラップできます。
     通常のスクロールと区別する方法があれば質問について実現できそ
    うなんですが、区別する方法が分からなかったので、回答できません
    でした。
     どなたかアイディアを思いついたらお願いします。
  • id:skky
    onScroll後の処理としては、ただのスクロールならURLは変化しないが、アンカーの場合はURLが変化するということでタイマーと同じくlocation.hashをチェックすれば良いと思います。タイマーより負荷が減る分一歩前進ですね!
  • id:lains_you
     onScroll時、Firefoxならきちんと遷移後のlocation.hashが取得できるのですが、IE6だと遷移前のものが返ってきてしまうんです。
     ブラウザごとに挙動が異なるので、厳しいです。
  • id:backupper
    location.hashの値は評価タイミングをずらす事で解決できる可能性があると思います。
    ただ、根本的な問題として、スクロールイベントの発生自体がクライアントのウィンドウサイズに依存するため、アンカージャンプでのイベント発生が保証されません。
  • id:villain
    ページ内に直接JavaScriptのアンカーをつけてブラウザの
    ツールバーは使用しないようにしてもらえば一番簡単なので
    しょうけど...。

    <a href="javascript:alert('戻る を押しました');">戻る</a>
  • id:iiiiiiiii
    コメントありがとうございます。

    いろいろと試してみましたが、やはりsetIntervalがいいのかなと思います。

    ただ、今のところ、2の方が書いていただいた方法でも、IEではうまくアラートがでないんですよね。Firefoxで動いていたから安心してました。

    何でかわかんないな…

この質問への反応(ブックマークコメント)

トラックバック

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません