web-dev-qa-db-ja.com

javascriptブックマークレットへのファビコンの追加（window.openを使用）

Window.open javascript関数を起動して、ブックマークレットで小さなウィンドウを開くブックマークレットがあります。これは、訪問したサイトとサーバーの間の通信に使用される外部機能です。ブックマークレットがブックマークツールバーに追加されたときにファビコンが表示されるようにしたいと思います。ブックマークレットはjavascriptであり、それに関連付けられたドメインがないため、この目標を達成するのは困難または不可能になるでしょう。

問題の私の理解：

ファビコンは理解しやすく、HTMLドキュメントの先頭にあるリンクです。ブラウザは、実際のサイトを参照してブックマークするときにこれをプルできます。ただし、ご覧のとおり、私のブックマークレットはHTMLが存在しないjavascript起動コードから実行されているため、ファビコンへのリンクはありません。まだ諦める準備はできていませんが、注入できるものがあると感じています...

現在のところ、ブックマークレットの起動コードは次のようになっています。

現在のスクリプト-ブックマークレット、ファビコンなし（すべてのコードが改行でフォーマットされていることに注意してください-すべてのブラウザで機能するわけではなく、通常は1行です）

javascript:void(window.open(
        'http://mydomain.com/bookmarklet/form?u='
        +encodeURIComponent(location.href)+
        't='+encodeURIComponent(document.title),
        'test','status=0,toolbar=0,location=0,menubar=0,
         resizable=false,scrollbars=false,height=379,width=379'
        ));

私が解決策に最も近いものは次のとおりですが、新しいウィンドウは開きません。ページとしてhtmlを使用して新しいタブを作成するだけです。

ファビコンが機能し、ブックマークレットウィンドウがありません

javascript:'<!DOCTYPE html>
    <html><head>
    <title>Hello World</title>
    <link rel="icon" type="image/png" href="http://www.tapper-ware.net/devel/js/JS.Bookmarklets/icons/next.png" />
    </head>
    <body>Hello World</body>
    </html>';

2つの組み合わせを試しましたが、アイコンが使用されていないようです。誰かが回避策のタイプを見ることができるかどうか知りたいのですが..それは可能だと思いますが、私が試しているように正しく設定されていないと思います。

2つのハイブリッド-ブックマークレットがファビコンなし

javascript:'<!DOCTYPE html>
    <html><head>
    <title>Hello World</title>
    <link rel="icon" type="image/png" href="http://www.tapper-ware.net/devel/js/JS.Bookmarklets/icons/next.png" />
    </head><body>Hello World</body></html>';
    window.open('http://mydomain.com/bookmarklet/form?u='
    +encodeURIComponent(location.href)+
    '&t='+encodeURIComponent(document.title),
    'test',
    'status=0,toolbar=0,location=0,menubar=0,resizable=false,
     scrollbars=false,height=379,width=379').void(0);

Window.open（）を起動する前にhtml構造を使用しました。これにより、ブックマークレットが新しいウィンドウで正常に開かれましたが、ブックマークアイコンのファビコンが表示されませんでした。

論理的解決策：

これについての私の考えは、ブックマークレットが、ファビコンリンクと<head>内の起動スクリプトを含む単なるHTMLファイルであるページを指すようにすることです。ただし、空白のHTMLファイルを含む新しいタブでこのウィンドウを開いてポップアップを起動することは望ましくありません。回避策..？

同様の質問がありますが、探している答えが見つからなかったようです。

ブックマークレットをツールバーにドラッグしたときにファビコン/アイコンを設定するにはどうすればよいですか？

動作するjavascriptファビコンのソース（ただし、ブックマークレットはありません）：

http://www.tapper-ware.net/blog/?p=97

これに関するあなたの現在の知識/考えがどうなるかに興味があります

javascriptbookmarkletfavicon
36
Atticus

私が試したことのいくつかは、おそらくあなたをもう少し動かすかもしれません：

現在のドキュメントに新しいリンク要素を追加します。

javascript: var newLink = document.createElement('link');
newLink.setAttribute('rel','icon');
newLink.setAttribute('type','image/png');
newLink.setAttribute('href','http://www.tapper-ware.net/devel/js/JS.Bookmarklets/icons/next.png');
document.querySelector('head').appendChild(newLink);
void(0);

IEテストのためにquerySelectorを使用していたことに注意してください（ただし、最新のブラウザーでも機能します）。ChromeおよびFFでは、次の場合に無効な文字が表示され続けました。要素を作成しようとしたので、区分的属性設定を行う必要がありました。

「data：image/png; base64、iVBORw0KGgoAAAA ...」URIスキーマを使用してbase64でエンコードされた画像文字列を使用しようとしましたが、現在のHTMLテキストに設定する必要があるため何も役に立ちませんでした（私はできましたが、ブックマークレットがないという上記のあなたと同じ問題に遭遇しました）。

クロスサイトスクリプティングの懸念のため、これを行うことができないのではないでしょうか。わからない...いずれにせよ、あなたが何を思いついたのか本当に興味があります（あなたが何かを思いついた場合）。

6
SPFiredrake

私は試して再試行しましたが、最初の結論は「それはできません（少なくともUbuntu 11.04のFF4では）」でした。あなたは（私が思うに）あなたのサイト訪問者のための簡単な解決策を必要としています（ドラッグアンドドロップ、ワンクリックでブックマークを追加...）。

私は回避策を見つけました、それは仕事をします、しかしそれは少しバグがあります（多分誰かがそれを修正するのを手伝うことができます）。
PROS：

  • ブックマークレットにアイコンを追加する
  • windows.openを使用します
  • 空のページを残しません

短所：

  • （ページを残す代わりに）現在のページをリロードします
  • Firefox POP-ulブロッカーで「javascript：」で生成されたHTMLページにPOP-upの読み込みを許可させることはできないため、毎回許可を押す必要があります

これはコードです：

<a href="javascript:'&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;&lt;link rel=&quot;icon&quot; type=&quot;image/png&quot; href=&quot;http://www.tapper-ware.net/devel/js/JS.Bookmarklets/icons/next.png&quot; /&gt;&lt;/head&gt;&lt;body onLoad=&quot;window.open(\'http://example.com',\'test\',\'status=0,toolbar=0,location=0,menubar=0,resizable=false,scrollbars=false,height=379,width=379\');setTimeout(\'history.back(-1);\',100);&quot;&gt;&lt;/body&gt;&lt;/html&gt;';">Bookmarklet</a>

これはページに配置するリンクです。ユーザーはこのリンクをブックマークバーにドラッグアンドドロップする必要があります（ワンクリックでブックマークとして追加するには、 ブックマークスクリプトの追加 のようなものを使用できます）。ブックマークには、ユーザーが少なくとも1回クリックするまで、アイコンはありません。

それで、それがどのように機能すると思われるか：
1。ブックマークレットから生成されたHTMLページにユーザーをリダイレクトします（これにより、[〜＃〜]アイコン[〜＃〜]が可能になります）
2。 onLoadは、「windows.open」を使用して必要なウィンドウを開きます
3。 「history.back（-1）」を使用してページをリダイレクトします

理論的には、エバーシングは非常に高速に行われるため、ユーザーには新しいページが表示されず、現在のページが再読み込みされ、新しいウィンドウが表示されます。

問題：
1。 window.openがFirefoxによってブロックされているため、history.backにsetTimeoutを使用します。そのため、毎回[許可]をクリックする必要があります（誰かがこれを修正できる場合...これを使用する可能性がある場合は、さらに開発してください:)）

これが信頼できる解決策ではないことは知っていますが、これが私がこれまでに得た唯一の解決策です。

これが少し役立つことを願っています。 :)

4
Radu Maris

「空白のHTMLファイルで新しいタブを開いてポップアップを起動したくない。回避策..？」

本当に視覚効果が必要な場合は、非表示のiframeで空白のHTMLを起動してから、javascriptを起動してみてください。

お役に立てば幸いです

1
Will