Help us understand the problem. What is going on with this article?

GitHubのpjaxによる画面遷移をユーザースクリプトなどから検知する

More than 3 years have passed since last update.

pjaxによる画面遷移ではユーザースクリプトが新しく呼び出されない。ここでは、GitHubでpjaxによる画面遷移が発生したことをユーザースクリプト側で検知する方法をいくつか紹介する。Chrome Extensionなどのブラウザ拡張を書くときにも参考になるかもしれない。

URLをポーリングする

setIntervalなどで定期的にURLを確認することでpjaxによる画面遷移が検知できる。

URLが変更されたときに発生するイベントはないようだ1

MutationObserverでDOMの変更を検知する

おそらく一番まっとうな方法。かつてはDOMの変更検知にはDOMNodeInsertedをはじめとするmutation eventsが使われていたが、現在は非推奨になっていて、代わりにMutationObserverが提供されている。

使用例など

独自イベントを取得する

どこでも使える方法ではないが、サイト側のJavaScriptで独自にイベントが発行されていることがある。

GitHubではpjaxの実装にdefunkt/jquery-pjaxを使っているので2、pjax処理の過程でpjax:successなどのイベントがjQueryを使って発火される。

jQueryから発行されるイベントの名前に:が含まれる場合、vanilla JSから取得することはできないので、何らかの方法でコンテンツと同じコンテキストでJavaScriptを実行する必要がある。

GitHubではCSPで'unsafe-inline'が設定されているため、Location hackContent Script Injectionは使えない。unsafeWindowからjQueryを呼び出してイベントハンドラを設定する以外の方法はないのではないかと思う。

使用例など

CC0


  1. history.popState()が実行されたときに発生するPopStateEvent、hash fragmentが変更されたときに発生するHashChangeEventなどはある。 

  2. 将来的にはgithub/pjaxに置き換えられそう。 

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした