Clever Geek Handbook

しおり

みなさん、こんにちは。今日はブックマークレット、またはブラウザのブックマークの使用についてお話します。



誰も知らない、これはあなたがブックマークに追加することができるものです（はい、今日私はキャプテンエビデンスの役割でデビューします:)、そしてそれをクリックすると、何らかの効果を生み出します。



例は、 http：// ulizkoにある今日のメモのヒーローです。 com / demo / allthat / 。 使用説明書：

  1. 「リンク」リンクをブックマークバーにドラッグするか、それを右クリックして「お気に入りに追加」メニュー項目を選択します。
  2. http：// twitterなどのサイトに移動します。 com 、このブックマーク（またはお気に入り）をクリックします。




データを入力できるウィンドウが表示されます。 一般に、これはウィッシュリスト（以前にいくつかのサイトで作成された）に欲求を追加したり、アラートトリガーを構成したりするためのインターフェースになると想定されています。 エントリーレベルの検証もあります。 サーバーとのデータ交換が確立されました。つまり、どのドメインでもウィッシュリストのリストが届き、ドメインからの新しい欲求がウィッシュリストへの愛の翼に乗って、その腕にぴったりと収まります1 。



しかし。 今日、私たちはこれについて話しているのではなく、原則としてそのようなことをする方法について話している。









コードの分析に直接進む前に、質問（誰も私に質問しませんでした）に答えたいと思います。つまり、「ブックマークレットの可能性は何ですか？」です。 正解はanyです。 スクリプトを読み込む機会があるので、クライアントページで何でもできます。 たとえば、任意のページでノートブックまたはタスクマネージャにエントリを追加できる「リモート」ウィジェットを作成します。 または、タスクマネージャ全体を移植可能にします。 また重要なことは、ほとんどどこでも動作することです。これらは、Firefoxのプラグインやオペラのウィジェットではありません。 ブックマークレットは、（ほとんど、ほとんど）OSやブラウザを気にしません。 一般的に、想像力の範囲があります。



それでは、これらのブックマークレットはどのように機能しますか？

非常に簡単：javascriptコードを含むhref属性を持つページにアンカー要素を作成する必要があります。 ロシア語に翻訳する場合、そのようなリンクを作成する必要があります。そのアドレスは、概してブックマークレットになります。



< a href ="javascript:alert('I am bookmarklet'); void 0;" > Bookmarklet </ a >



* This source code was highlighted with Source Code Highlighter .







リンクアドレスのjavascriptコードが機能するためには、その前にjavascript:



という単語を追加する必要があります。 私の硬化が失敗しない場合、これは「javascript擬似プロトコルの指定」と呼ばれます。 別の重要な詳細-コードが何らかの値を返す場合、ブラウザはそれをあなたが行く必要のあるアドレスとみなし、現在のページを離れます。 これを回避するには、値を返さないでください。つまり、スクリプトの最後にvoid 0;



を追加しvoid 0;



または、値を返さない匿名関数ですべてのコードをラップします- (function(){... ...})()



。



いずれにせよ、これらすべての質問は、Ilya Kantorの記事Bookmarkletsとそれらを書くための規則で詳細に調べられました。



まだ知っておく必要があるのは、すべてのブラウザがブックマークレットコードの最大長を制限していることだけです。 また、キャラバンの速度が最も遅いラクダの速度と同じであるため、クロスブラウザブックマークレットの最大サイズはIE 6 SP2によって課される制限、つまり488文字に等しくなります。



したがって、ある種の複雑なロジックを不完全な500文字でエンコードできないため、ほとんどの場合、ブックマークレットは新しいスクリプトタグを作成し、そこにアプリケーションコードが既にロードされています。



私もそうしました。 これが、人に適応した形式のブックマークレットのコードです。



( function () {

// a ( )

// window, ,

// ( , )

var a = window.allThat = {

userId : '123345456' ,

server : 'http://mysite.com/' ,

script : document .createElement( 'script' ), // ,

// - , ""

css : document .createElement( 'link' ) //

},

/* DOM : */

h = document .getElementsByTagName( 'head' )[0];

a.css.rel = 'stylesheet' ;

a.css.href = a.server + 'css/bookmarklet.2.css' ;

h.appendChild(a.css);

a.script.src = a.server + 'js/bookmarklet.7.js' ;

h.appendChild(a.script);

h= null ;

})();



* This source code was highlighted with Source Code Highlighter .







次に、ウィンドウ自体のコードが直接ロードされます。 それ自体に興味があると思うので、ここに投稿します（顧客はアメリカ人なので、コメントはすべて英語です）。



興味のある方は、ブックマークレットのソースコードをご覧ください。



注 ：



More articles:


All Articles