2015年12月24日木曜日

ユーザースクリプトを書くときにjQueryを使おうと思ったけど変なところがあったので詰まったのを解決?した話

おさらい

ユーザースクリプトでjQueryを使う時は,
@require http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js
のように宣言してjQueryを利用します.
コンフリクトした場合は,
this.$ = this.jQuery = jQuery.noConflict(true);
と書くと回避できます.
ここらへんは公式のリファレンスを見てもらったほうが早いと思います.

実は…

Chrome+Tampermonkeyだと何もしなくても使えます.
ウェブページのjQueryを自動的に適用してくれているみたいです.
なのでChromeでは詰まりませんでした.

しかし

Firefox+Greasemonkeyではそうはいかないので素直に@requireして使います.
だけど正しく動かない.
あるノードのイベント一覧を取得したかったのですが,
なぜかundefined,未定義と言われてしまう….
しかしコンソールから同じコードを実行するとちゃんとイベント一覧が取れる!
ドキュメントの読み込みのタイミングかと思いましたがそうではありませんでした.

原因

Chromeではなぜか動くということから無事糸口を見つけることができました.
読み込んだjQueryではなくウェブページのjQueryを使う必要があったのです!!!
それぞれのjQueryが完結しているみたいなので,外部からは触れられないっていう話だと思います.
なのでjQueryで実行部分をスクリプトタグの中に入れて,スクリプトタグをページに挿入し,
該当スクリプトをページ内で実行させるようにしました.
(ユーザースクリプトからウェブページのjQueryを利用する方法がわからなかった…)
そうすることで無事,FirefoxでもChromeでも動くようになりました!

ちなみに

そのユーザースクリプトというのがこれ
右クリック禁止とかコピペ禁止を禁止するスクリプトです.

0 件のコメント:

コメントを投稿