将 favicon添加到 javascript Bookmarklet(使用 window.open）

Adding favicon to javascript Bookmarklet (uses window.open)

本文关键字：使用 window open Bookmarklet favicon 添加 javascript      更新时间：2023-09-26

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

我对这个问题的理解：

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

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

当前脚本 - 书签，没有图标（请注意，所有代码都用换行符格式化 - 不适用于所有浏览器，通常是一行） 

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文件的新选项卡中打开，然后启动弹出窗口。解决方法..？

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

如何将书签拖动到工具栏时设置图标/图标？

工作 javascript 图标的来源（但是没有书签）：

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

我很想知道您目前对此的知识/想法是什么

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

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

  • 向书签添加图标
  • 它使用Windows.Open
  • 不会留下空白页

缺点：

  • 它重新加载当前页面（而不是留下页面）
  • 无法让 Firefox POP-ul 阻止程序允许"javascript："生成的 HTML 页面加载弹出窗口，因此每次都需要点击允许

这是代码：

<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. 将用户从书签重定向到生成的 HTML 页面（这使得 ICON 成为可能）
2. onLoad使用"windows.open"
打开您需要的窗口3. 使用"history.back（-1）"将页面重定向回去

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

问题：
1. 我使用 setTimeout 作为历史记录.back beacause window.open 被 Firefox 阻止，所以我每次都需要单击允许（如果有人可以解决这个问题......我们有机会使用它，进一步开发它:)）

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

希望这有所帮助。 :)

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

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

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，我在尝试创建元素时不断获得无效字符，因此我必须进行分段属性设置。

已尝试使用 base64 编码的图像字符串，使用"data：image/png;base64，iVBORw0KGgoAAAA..."URI 架构，但这没有任何帮助，因为我仍然必须将其设置为当前的 HTML 文本（我可以这样做，但遇到了与您上面没有书签相同的问题）。

也许由于跨站点脚本问题而无法做到这一点？不确定。。。无论哪种方式，真的很想知道你想出了什么（如果你设法想出任何东西）。

"我不希望这个在新选项卡中打开一个空白的 HTML 文件，然后启动一个弹出窗口。解决方法..？"

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

希望有帮助

相关文章：