Question

我有一个bookmarklet，它启动一个window.open javascript函数，用我的bookmarklet打开一个小窗口 - 一个用于在任何访问过的站点和我的服务器之间进行通信的外部功能。当书签工具栏添加到书签工具栏时，我希望显示 favicon 。我意识到书签是javascript，没有域名绑定它所以要么难以实现这个目标。

我对问题的理解：

Favicons易于理解，是HTML文档头部的链接。浏览器可以通过引用为实际网站添加书签。但是，正如您所看到的我的bookmarklet是在没有HTML的javascript启动代码中运行的，因此没有指向 favicon 的链接。我还没准备好放弃，但我觉得可以注射一些......

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

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

逻辑解决方案：

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

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

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

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

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

我对你目前的知识/想法是什么感兴趣

Answer 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，因此无效文本（我可以做，但遇到与上面没有书签相同的问题）。

由于跨站点脚本问题，可能无法做到这一点？不确定......无论哪种方式，都非常好奇，看看你想出了什么（如果你能想出任何东西）。

Answer 2

我尝试并重试了，我的第一个结论是：“它无法完成（至少在Ubuntu 11.04的FF4中没有）”。您需要（我猜）为您的网站访问者提供一个简单的解决方案（拖放，只需点击一下即可添加书签...）。

我找到了一个解决方法，它确实有它的工作，但它有点儿小车（也许有人可以帮忙解决它）。
的优点：

在书签中添加图标

它使用windows.open

不会留下空白页

<强> CONS：

重新加载当前页面（而不是留下一页）

无法使Firefox POP-ul阻止程序允许“javascript：”生成的HTML页面加载POP-ups，因此每次都需要点击允许

这是代码：

<a href="javascript:'<!DOCTYPE html><html><head><link rel="icon" type="image/png" href="http://www.tapper-ware.net/devel/js/JS.Bookmarklets/icons/next.png" /></head><body onLoad="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);"></body></html>';">Bookmarklet</a>

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

所以它如何起作用：
1.将用户重定向到书签中生成的HTML页面（使 ICON 可用） 2. onLoad使用“ windows.open ”打开您需要的窗口 3.使用“ history.back（-1）”
重新定向页面
理论上，任务发生得如此之快，用户看不到新页面，只是当前页面正在重新加载，并且会出现一个新窗口。

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

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

希望这会有所帮助。：）

Answer 3

“我不希望在新标签中打开这个空白HTML文件，然后启动弹出窗口。解决方法..？”

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

希望有所帮助

Answer 4

这可能不是您想要的解决方案，特别是如果您不使用Firefox，但我使用名为Bookmark Favicon Changer的插件来设置我的书签上的图标，并且效果很好。

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

4 个答案: