BLOGTIMES
2014/05/13

jQuery を使ったブックマークレットを作る

  javascript 
このエントリーをはてなブックマークに追加

とあるウェブアプリがちょっと不便だったので、jQuery を使ったちょっとしたアプリを書いてみたのですが、それをブックマークレットから呼び出せるようにしようとしたらいろいろとハマってしまったので忘れないうちにやり方のメモを残しておきます。

例えば下記のような body の末尾に hoge! という文字列を追加する jQuery を使った処理があるとします。

jQuery(document).ready(function(){jQuery("body").append("hoge!")})

これを参考にあるブックマークレットで jQuery をロードする処理をテンプレートにして、処理を埋め込んでいきます。

javascript:(function(f,s){s=document.createElement("script");s.src="//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js";s.onload=function(){f(jQuery.noConflict(false))};document.body.appendChild(s)})(function($){ /* ここに処理を書く */});

合体させるとこんな感じになります。これをブックマークの URL 欄に登録するとブックマークレットとして動作させることができました。

javascript:(function(f,s){s=document.createElement("script");s.src="//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js";s.onload=function(){f(jQuery.noConflict(false))};document.body.appendChild(s)})(function($){jQuery(document).ready(function(){jQuery("body").append("hoge!")})});

参考


    トラックバックについて
    Trackback URL:
    お気軽にどうぞ。トラックバック前にポリシーをお読みください。[policy]
    このエントリへのTrackbackにはこのURLが必要です→https://blog.cles.jp/item/6714
    Trackbacks
    このエントリにトラックバックはありません
    Comments
    愛のあるツッコミをお気軽にどうぞ。[policy]
    古いエントリについてはコメント制御しているため、即時に反映されないことがあります。
    コメントはありません
    Comments Form

    コメントは承認後の表示となります。
    OpenIDでログインすると、即時に公開されます。

    OpenID を使ってログインすることができます。

    Identity URL: Yahoo! JAPAN IDでログイン