teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

2

ちゃんと動かないケースがあるので修正

2016/11/26 21:10

投稿

ryls-nmm
ryls-nmm

スコア633

answer CHANGED
@@ -24,7 +24,7 @@
24
24
  上のコードだとロードしたときに一回だけファビコンをつけるので再検索したあとはつきません
25
25
 
26
26
  次のようにしてみてください
27
- ```
27
+ ```javascript
28
28
  $(function(){
29
29
  function attachFavicon(){
30
30
  $("h3.r a").each(function(){
@@ -45,3 +45,43 @@
45
45
  ```
46
46
 
47
47
  検索結果の更新を監視して変化があったら再度ファビコンをつける処理を行います
48
+
49
+ 追記2
50
+ ----
51
+
52
+ エラーは最初の DOM 構築したときに #sample がないことが原因で起きているようです
53
+ リロードしたとき、Chrome の Omnibox(URLいれるとこ)からの検索、Google 検索結果の再検索等で細かい動きが違うので動く場合と動かない場合、2つアイコンが出る場合が発生しているようです
54
+
55
+ ちょっと無理矢理感もありますけど修正しました
56
+
57
+ ```javascript
58
+ $(function(){
59
+ function attachFavicon(){
60
+ if($("img.favi").length) return
61
+
62
+ $("h3.r a").each(function(){
63
+ var domain = this.host;
64
+ var favget = "//www.google.com/s2/favicons?domain="+domain;
65
+ var favgethtml = "<img src='"+favget+"' class='favi'/>";
66
+ $(this).parent().prepend(favgethtml);
67
+ });
68
+ }
69
+
70
+ const mo1 = new MutationObserver(_ => {
71
+ if($("#search").length === 0) return
72
+
73
+ mo2.observe($("#search").get(0), {childList: true})
74
+
75
+ mo1.disconnect()
76
+ })
77
+ const mo2 = new MutationObserver(_ => {
78
+ attachFavicon()
79
+ })
80
+
81
+ mo1.observe(document.body, {childList: true, subtree: true})
82
+
83
+ attachFavicon()
84
+ })
85
+ ```
86
+
87
+ ふたつアイコンが表示されないようにすでに favicon が存在するときは何もしない分岐と #search が作られてから再検索監視を始めるようにしました

1

追加質問に追記

2016/11/26 21:10

投稿

ryls-nmm
ryls-nmm

スコア633

answer CHANGED
@@ -14,4 +14,34 @@
14
14
  こちらをどうぞ
15
15
 
16
16
  一応動作確認しています
17
- また `h3.r a` というセレクタで検索結果のタイトルを取得していますが、ここは Google の気分で将来的にかわるかもしれません
17
+ また `h3.r a` というセレクタで検索結果のタイトルを取得していますが、ここは Google の気分で将来的にかわるかもしれません
18
+
19
+
20
+ 追記
21
+ ----
22
+
23
+ Google の検索結果の画面で再検索した場合はリロードせず検索結果だけを更新しています
24
+ 上のコードだとロードしたときに一回だけファビコンをつけるので再検索したあとはつきません
25
+
26
+ 次のようにしてみてください
27
+ ```
28
+ $(function(){
29
+ function attachFavicon(){
30
+ $("h3.r a").each(function(){
31
+ var domain = this.host;
32
+ var favget = "//www.google.com/s2/favicons?domain="+domain;
33
+ var favgethtml = "<img src='"+favget+"' class='favi'/>";
34
+ $(this).parent().prepend(favgethtml);
35
+ });
36
+ }
37
+
38
+ const mo = new MutationObserver(_ => {
39
+ attachFavicon()
40
+ })
41
+ mo.observe($("#search").get(0), {childList: true})
42
+
43
+ attachFavicon()
44
+ })
45
+ ```
46
+
47
+ 検索結果の更新を監視して変化があったら再度ファビコンをつける処理を行います