Clever Geek Handbook

ページを更新せずに動的なファビコンまたは表示カルマ

画像

私たちのお気に入りのブラウザでは、私たち一人一人が同時にいくつかのタブを常に持っています。 タブのタイトルが表示されない場合があります- ファビコン 'kiのみ。 しかし、多くの場合、サイトのロゴを表示する以外の情報は提供しません。 そしておそらく無駄に。 しかし、ここでこの場所（16px * 16px程度）を使用しようとします。 少なくともこれを行う方法はわかります。



<link [rel = "icon"] ... />を変更しようとしないでください。



おそらく誰かが叫ぶだろう：「ここで何がそんなに複雑なの？ リンクタグを取り、その中のsrcを変更しました！」 しかし、そこには同志がいました。 このコードは機能しません：

  1. var oldicons = document .querySelectorAll( 'link[rel="icon"], link[rel="shortcut icon"]' ); for ( var i = 0; i < oldicons.length; i++ ) { oldicons[i].setAttribute( "src" , "/newicon.png" ); }



  2. var oldicons = document .querySelectorAll( 'link[rel="icon"], link[rel="shortcut icon"]' ); for ( var i = 0; i < oldicons.length; i++ ) { oldicons[i].setAttribute( "src" , "/newicon.png" ); }



  3. var oldicons = document .querySelectorAll( 'link[rel="icon"], link[rel="shortcut icon"]' ); for ( var i = 0; i < oldicons.length; i++ ) { oldicons[i].setAttribute( "src" , "/newicon.png" ); }



  4. var oldicons = document .querySelectorAll( 'link[rel="icon"], link[rel="shortcut icon"]' ); for ( var i = 0; i < oldicons.length; i++ ) { oldicons[i].setAttribute( "src" , "/newicon.png" ); }





これも：

  1. $（ 'link [rel = "ショートカットアイコン"]' ）.attr（ "src" 、 "/newicon.png" ）;


なぜ私はそれを言わないのですか（誰かが説明しますか？）、しかし、それは次のようにできます（jQueryで）：

  1. $（ 'link [rel $ = icon]' ）.remove（）;
  2. $（ 'head' ）.append（$（ '<link rel = "ショートカットアイコン" type = "image / x-icon" />' ）.attr（ 'href' 、 "/newicon.png" ））;




つまり、最初に要素がある場合はそれを削除し、次にそれを子としてheadタグに追加します。 remove（）の代わりに、 replaceWith（ ''）も使用できます。



動的なファビコンが必要なので、それらをキャンバスに描画し、それをファビコンとして使用します。



  1. var c = document .createElement（ 'canvas' ）;
  2. c.height = c.width = 16;
  3. var x = c.getContext（ '2d' ）;
  4. x.font = '18px bold Calibri' ;
  5. x.fillStyle = '＃000' ;
  6. if （m）{
  7. x.fillText（parseInt（m [1]）> 9？ ' 9 +' ：m [1]、0、16、16）;
  8. }




__defineSetter__を使用する



GMailでは、新しいメッセージの数がヘッダーに表示されます。

(15) - v.pupkin@gmail.com - GMail





そこから正規表現番号を取得し、新しいメッセージの数を取得しましょう。



Google XML / APIを使用して、間違えないようにすることができますが、承認が必要です。GMailメールに関するものではないため、この方法は検討しません。 また、異なるwindow.setTimeOutに頼らずにウィンドウタイトルの変更を処理する方法について。 これを行うには、Geckoの__defineSetter__メソッドを使用します（詳細はこちら ）。



このメソッドを使用すると、要素のデータが変更されたときに（まだ変更されていない場合）イベントハンドラーを使用できます。

  1. Object.prototype .__ defineSetter __（ 'Id' 、 function （data）{
  2. alert（ "フックされたデータ=" +データ）;
  3. }）;


この例は、Object要素のid属性（およびこれは任意のタグまたはグローバル変数）を変更すると、通知アラート（「hooked data = "+ data）」が表示されることを示しています。



そして、この「ハンドラー」をdocument.titleにハングさせてから、上記のすべてのアクションを実行して、記事の最初の部分をまとめます。

  1. document .__ defineSetter __（ 'title' 、 function （v）{
  2. 文書の削除.title; //古い「ハンドラ」を削除します
  3. document .title = v; //新しいデータをインターセプトして変数に入れます
  4. document .__ defineSetter __（ 'title' 、arguments.callee）; //そして、ハンドラーをその場所にすばやく戻します
  5. var m = / \（（[0-9] +）\）/。exec（v）; //変数のあるメッセージの数で通常のタグを噛みます
  6. var c = document .createElement（ 'canvas' ）; //キャンバスを起動します。 キャンバスを作成する
  7. c.height = c.width = 16; //ディメンションを割り当てます
  8. var x = c.getContext（ '2d' ）; //コンテキストを取得します
  9. x.font = '18px bold Calibri' ; //フォントスタイルを設定します
  10. x.fillStyle = '＃000' ; //そして塗りつぶし色
  11. if （m）{
  12. x.fillText（parseInt（m [1]）> 9？ ' 9 +' ：m [1]、0、16、16）; //数字> 9の場合、「9+」を表示
  13. }
  14. var o = document .querySelectorAll（ 'link [rel = "icon"]、link [rel = "shortcut icon"]' ）; //可能なすべてのファビコンタグを見つけます
  15. for （ var i = 0; i <o.length; i ++）{
  16. o [i] .parentNode.removeChild（o [i]）; //そして強打します、
  17. }
  18. var n = document .createElement（ 'link' ）; //その後、再度作成します
  19. n.setAttribute（ 'rel' 、 'icon' ）; //必要なatrubutsを使用
  20. n.setAttribute（ 'href' 、c.toDataURL（））; // c.toDataURL（）は、「data：image / png; base64、......」というテキストの形式で、キャンバス上の完成した画像を取得します/
  21. document .querySelector（ 'head' ）.appendChild（n）; //最後に、新しく作成したファビコンをドキュメントに適用します。 出来上がり！
  22. }）;




これがどのように機能するかを確認するには、 リンクに移動し、GMailの受信トレイに移動します。 新しいメッセージがある場合、カウンターがお気に入りの絵として表示されます。 Ubuntuの下でOperaとFirefoxで動作しました。 Chromeはこのアイデアを好まなかった。



これはどこに適用できますか？



はい、どこでも好きです。 たとえば、タブを表示しないために、新しいメッセージがある場合、このメソッドを使用できます。 ただし、 Google LabsのカウンターやFFのgmail-notifierなどを使用できます。

ただし、サイト上のユーザーに何かを知らせたい場合があります。



または、カルマがハブで成長または下降する様子をお楽しみください:)



後者の場合を別の例の基礎として取り上げます。



Greasemonkeyをスクリプトエンジンとして使用しました 。 このuserscriptを使用できます。



ディスプレイは、Habracenterにいるときにのみ機能します（ところで、あなただけではありません）。 自分のハブにいなくても、単純にajaxをねじ込んで数字を取得できます。これはあなたの裁量です。 必要に応じて、Google Chrome（拡張機能を作成）またはOpera（たとえば、同じ「javascript-bookmark」）にねじ込むことができます。



そして、ここにスクリプト自体があります（ upd：わずかに更新されました）：





  1. var c = document .createElement（ "canvas" ）; //同じキャンバスを使用します
  2. c.height = c.width = 16;
  3. var cx = c.getContext（ "2d" ）;
  4. cx.beginPath（）; //青いボックスと黒いテキストを描画します
  5. cx.rect（0、3、18、11）; //キャンバスに配置します
  6. cx.fillStyle = "＃6DA3BD" ;
  7. cx.fill（）;
  9. cx.font = "10px Normal Tahoma" ;
  10. cx.fillStyle = "#fff" ;
  12. var mark = document .querySelectorAll（ ".mark span" ）; //ページから番号を取得します
  13. cx.fillText（parseInt（mark [0] .innerHTML）、0、12、16）;
  15. //ファビコンを適用します
  16. var oldicons = document .querySelectorAll（ 'link [rel = "icon"]、link [rel = "shortcut icon"]' ）;
  17. for （ var i = 0; i <oldicons.length; i ++）{
  18. oldicons [i] .parentNode.removeChild（oldicons [i]）;
  19. }
  21. var newicon = document .createElement（ "link" ）;
  22. newicon.setAttribute（ "rel" 、 "icon" ）;
  23. newicon.setAttribute（ "href" 、c.toDataURL（））;
  24. document .querySelector（ "head" ）.appendChild（newicon）;
  26. // 2分ごとにページを更新します
  27. window.setTimeout（ function （）{
  28. window.clearTimeout（）;
  29. window.location.reload（）;
  30. }、120000）;
*このソースコードは、 ソースコードハイライターで強調表示されました。




それだけです。 投稿の少なくとも一部が自分にとって有益だと思った場合、たとえそれがトピックのトピックに関係していなくても、それを書くことに無駄ではないと考えられる時間を許してください。

ファビコンを動的に変更することに興味がある場合は、jQueryの既製のプラグインを使用できます-ファビコンも（同じキャンバス経由で）アニメーション化できます。



ご清聴ありがとうございました。


More articles:


All Articles