transitive.info

pjax でページを移動した後の処理

コードのサンプルは javascript ではなくて coffeescript で書いてある。

pjax 切り替え時の処理

pjax:start と pjax:end に指定することができる。 ここでは、ページ切り替え後の処理なので pjax:end に処理を記述する。

$('#pjax-container').bind('pjax:start', ->
  ...
).bind('pjax:end', ->
  ...
)

スクロール

URL に # が含まれていれば、アンカーまでスクロールする。 そうでなければ、ページの上部まで。

if (n = url.search(/\#.*$/)) != -1
  anchor = $(url.substring(n)).offset().top
  $("html, body").animate({ scrollTop: anchor }, 0)
else
  $("html, body").animate({ scrollTop: 0 }, 0)

を pjax:end に bind する。

google analytics

jquery.pjax.js を見ると google analytics に対応している部分があるので、 特に何もしなくて良い（はず）。

google code prettify

prettyPrint()

を pjax:end に bind する。

twitter のボタンを更新する

pjax でページが切り替わるとき、何もしないと twitter のボタンの URL が更新されないで 前のページの URL がツイートされてしまう。

対策は https://dev.twitter.com/discussions/890 にあるようにする。

twitter のボタンは twtr-btn クラスの div で囲って

<div class='twtr-btn'>
<a href="https://twitter.com/share" class="twitter-share-button" data-lang="ja">ツイート</a>
<script> ... </script>
</div>

のような HTML だとする。

coffeescript で書くと次のようなプログラム

if (twtrBtn = $(".twtr-button")).length > 0
  twtrBtn.empty()
  twtrBtn.append('<a href="https://twitter.com/share" class="twitter-share-button" data-lang="ja" data-url="' + location.href + '">ツイート</a>')
  twttr.widgets.load()

を pjax:end に bind すれば良い。

はてなブックマークのボタンを更新する

bookmark_button_wo_al.js を見たところ、pjax でページ切り替え後に

Hatena.Bookmark.BookmarkButton.setup()

を実行すれば良いようだ。

twitter と同じように

<div class='hatena-button'>
<a href="http://b.hatena.ne.jp/entry/ ...></a>
<script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button_wo_al.js" charset="utf-8" async="async"></script>
</div>

のような HTML なら

if (hatenaBtn = $(".hatena-button")).length > 0
  hatenaBtn.empty();
  hatenaBtn.append('<a href="http://b.hatena.ne.jp/entry/' + location.href + '" class="hatena-bookmark-button" data-hatena-bookmark-title="SOME_TITLE" data-hatena-bookmark-layout="standard" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a>')
  Hatena.Bookmark.BookmarkButton.setup()

を pjax:end に bind すれば良い。

Tags of current page

, ,