将 favicon 添加到 javascript Bookmarklet（使用 window.open）答案

【问题标题】：Adding favicon to javascript Bookmarklet (uses window.open)将 favicon 添加到 javascript Bookmarklet（使用 window.open）
【发布时间】：2011-05-10 15:18:43
【问题描述】：

我有一个小书签，它启动一个 window.open javascript 函数来用我的小书签打开一个小窗口——一个用于在任何访问的站点和我的服务器之间进行通信的外部功能。我希望在将小书签添加到书签工具栏时显示 favicon。我意识到书签是 javascript，没有与之关联的域，因此要实现这个目标要么困难要么不可能。

我对问题的理解：

网站图标易于理解，是 HTML 文档头部的链接。浏览器可以在通过引用为实际站点添加书签时拉取它。但是，正如您所见，我的书签是从不存在 HTML 的 javascript 启动代码中运行的，因此没有指向 favicon 的链接。不过我还没准备好放弃，我觉得可以打针……

截至目前，小书签启动代码如下所示：

当前脚本 -- 小书签，无 favicon（注意所有代码的格式都带有换行符 -- 并非在所有浏览器中都有效，通常只有一行）

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>';

我尝试了两者的组合，但似乎没有使用图标。我很想知道是否有人能看到一种解决方法。我认为这是可能的，我只是不认为它设置正确，因为我一直在尝试。

我的两者混合——书签但没有图标

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 结构，这成功地在新窗口中打开了我的书签，但书签图标没有显示图标。

逻辑解决方案：

我对此的想法是让小书签指向一个页面，该页面只是一个带有网站图标链接的 HTML 文件和<head> 中的启动脚本。但是，我不希望在新选项卡中打开一个空白 HTML 文件，然后启动一个弹出窗口。解决方法..？

存在一个类似的问题，但我似乎没有找到我正在寻找的答案：

How to have favicon / icon set when bookmarklet dragged to toolbar?

工作 javascript favicon 的来源（但没有书签）：

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

我会对您目前对此的了解/想法感兴趣

【问题讨论】：

标签： javascript bookmarklet favicon

【解决方案1】：

我尝试过的一些事情可能会让你走得更远：

将新的链接元素附加到当前文档：

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文本（我可以这样做，但遇到了和你上面一样的问题，没有书签）。

也许由于跨站点脚本问题而无法做到这一点？不确定...无论如何，真的很想看看你想出了什么（如果你想出什么的话）。

【讨论】：

你是说这行得通，还是不行？不清楚。

【解决方案2】：

我试了又试，我的第一个结论是：“做不到（至少在 Ubuntu 11.04 上的 FF4 中做不到）”。您需要（我猜）为您的网站访问者提供一个简单的解决方案（拖放、一键添加书签...）。

我找到了一种解决方法，它确实有效，但它有点问题（也许有人可以帮助修复它）。
优点：

为小书签添加图标
它使用 windows.open
不会留下空白页

缺点：

它重新加载当前页面（而不是留下一个页面）
无法让 Firefox POP-ul 拦截器允许“javascript:”生成的 HTML 页面加载 POP-ups，因此您每次都需要点击允许

这是代码：

<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>

这是您放置在页面上的链接，用户需要将此链接拖放到书签栏（您可以使用Add Bookmark Script 之类的东西一键将其添加为书签），书签没有图标直到用户至少点击一次。

那么它应该如何工作：
1. 将用户从书签重定向到生成的 HTML 页面（这使得 ICON 成为可能）
2. onLoad 使用“windows.open”打开你需要的窗口
3. 使用“history.back(-1)”将页面重定向回来

理论上，一切都发生得如此之快，以至于用户看不到新页面，只是当前页面正在重新加载，并且出现了一个新窗口。

问题：
1.我将setTimeout用于history.back，因为window.open被Firefox阻止，所以我需要每次点击允许（如果有人可以解决这个问题......我们有机会使用它，进一步开发它:)）

我知道这不是一个可靠的解决方案，但这是迄今为止我得到的唯一解决方案。

希望这会有所帮助。 :)

【讨论】：

5 年后...这在当前版本的 Chrome 和 Firefox 中似乎没有任何作用

【解决方案3】：

“我不希望在带有空白 HTML 文件的新选项卡中打开此操作，然后启动弹出窗口.. 解决方法..？”

如果你真正追求的是视觉效果，你可以尝试在隐藏的 iframe 中启动空白 HTML，然后启动 javascript。

希望有帮助

【讨论】：

要创建 iFrame，它仍然必须是 JavaScript 链接。这只会使做完全相同的事情并遇到完全相同的问题变得更加复杂。