将网站图标添加到使用window.open的javascript书签工具中

34
我有一个书签工具,它启动了一个window.open JavaScript函数来打开我的书签工具,也可以用作和任何访问的站点和我的服务器之间通信的外部特性。当书签工具被添加到书签工具栏时,我希望能显示一个网站图标。我知道书签工具是JavaScript,没有与之相关联的域名,所以要实现这个目标可能会很难或者不可能。
我的理解:
网站图标很容易理解,是HTML文档头部内的链接,浏览器可以通过引用在收藏网站时拉取它。然而,正如你看到的,我的书签工具是由一个JavaScript启动代码运行的,其中不存在HTML,因此没有指向网站图标的链接。尽管如此,我还没有放弃,我感觉可以进行一些注入...
目前,书签工具启动代码看起来像这样: 当前脚本--书签工具,无网站图标(请注意所有代码都使用换行符格式化--不适用于所有浏览器,通常都是一行)
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文件。然而,我不想在一个新的选项卡中打开一个空白的HTML文件,然后再启动弹出窗口.. 有什么解决办法吗?


有一个类似的问题,但我似乎没有找到我要找的答案:

如何在将书签拖到工具栏时设置网站图标/图标集?

可工作的 JavaScript 网站图标来源(无书签):

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

我对你目前的知识/想法很感兴趣

4个回答

4

我尝试了多次,我的第一个结论是:“这不可能做到(至少在Ubuntu 11.04上的FF4中不行)”。您需要(我猜)为您的网站访问者提供简单的解决方案(拖放、一键添加书签...)。

我找到了一个解决方法,它完成了它的工作,但有点小问题(也许有人可以帮助修复它)。
优点:

  • 添加了一个书签图标
  • 它使用windows.open
  • 不会留下空页面

缺点:

  • 它重新加载当前页面(而不是留下一个页面)
  • 无法使Firefox弹出窗口拦截器允许“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;';">书签</a>

这是您在页面上放置的链接,用户需要将此链接拖放到书签栏中(您可以使用类似添加书签脚本一键添加书签),直到用户至少点击一次之前,该书签没有图标。

所以它应该如何工作:
1. 从书签中重定向用户到生成的HTML页面(这使得图标成为可能)
2. 在onLoad中使用“windows.open”打开您需要的窗口
3. 使用“history.back(-1)”将页面重定向回去

理论上,一切都发生得非常快,用户看不到新页面,只能看到当前页面正在重新加载,并出现了一个新窗口。

问题:
1. 我使用setTimeout来进行history.back,因为Firefox阻止了windows.open,所以我需要每次单击允许(如果有人能解决这个问题...我们有机会使用它,并进一步开发它 :))

我知道这不是一个可靠的解决方案,但这是我目前唯一的解决方案。希望这能有所帮助。 :)

五年后...在当前版本的Chrome和Firefox中似乎没有任何作用。 - imjosh

3

以下是我尝试过的一些可能能帮助你更好地进行的事情:

向当前文档附加一个新的链接元素:

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

请注意,我使用querySelector是因为要在IE中进行测试(尽管现代浏览器也可以使用)。但是在Chrome和FF中,当尝试创建元素时,我一直收到无效字符的错误,因此我不得不逐个设置属性。
尝试使用base64编码的图像字符串,使用"data:image/png;base64,iVBORw0KGgoAAAA..." URI模式,但由于我仍然需要将其设置为当前HTML文本(虽然我可以这样做,但遇到了与您上面相同的问题,即没有书签),所以这并没有帮助任何事情。
也许由于跨站点脚本的关注,这不能完成?不确定...无论如何,非常好奇看看您能想出什么(如果您成功想出了任何东西)。

你是在说这个可行,还是不可行?不太清楚。 - ctrl-alt-delor

1

“我不想在一个新标签页中打开一个空的HTML文件,然后再弹出一个窗口。有什么解决方法吗?”

如果你真正需要的是视觉效果,你可以尝试在隐藏的iframe中启动空白HTML,然后启动JavaScript。

希望能对你有所帮助。


要创建iFrame,仍然需要使用JavaScript链接。这只会使得做同样的事情更加复杂,并遇到同样的问题。 - McKayla

0
我想我有一个解决方案。这是代码:
<DT><A HREF="Bookmarklet goes here" ICON="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAiAAAAIgB69ySUgAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAL4SURBVDiNbZPfT1tlGMe/z3vec9oDLacH2sLEsh9Z3ciAieIUJxPMuCHZsl018R/YzRIv/GvwYtmVCWYxcZpmu5jDCZLNJmhXXJZQl7XIoBTWwdbD6en7Pt5YLNHvc/v8+D5Png8xM9pFRDEAJwEkhRBDAKC1LgCoAFhl5lp7vmwrJAAjliUzlmnOSCFSJIQNAKy119S63AiCLBHNAcjzP5OJmUFEZBjGpWjEvmZb1lRnZxiGEIecMTPqns+vvf35vdferFLqe2bmloORuBu91huPTTkx1xj9YFz+urQQqMDXRP82cZ0Iefv+1Ga1hs1q7TmA3yURxVwnmuk/kphMuF0QZhjXr38htjKfWzdvfKVXn+QDyzQODhXrikCa5mQjUBkiem4AGEof6/8yffSteIcdgjRDYnrmkjE4OEifXZwWPckjxvr6X6QaHkc6bIRDFmLRTgqCZndlu7YgASST8Vgq0dMFAPACQivssI3Ll6/QxMSn8tY3X4vc0k9Nyb6S0sDL3VgKT5E0ehPu1ZHTx6f7Et2wwyEwGWL8wkXDcRyAABBg2zbeHztHw++OGeX1DbG7s8WWKWVlu/aHlEKgq9NGtxMBAGjyDxy0q16vo5D/jeu1Ld3f6/KLTYYUAnKjul1QSnuuE7EBYL9JIAJa11dKIZd7xPfvfKcs9aqZ7o8yAKytV72N6nZBKoXKntcod0ScdyxTYtcXaHX4s1jE3R++Vbq+1TydcjWRCwBoBE3seY2yUqhIAKsrxbXs2Rc76bHRIep4o/FyZweLD+7rV5VS88TbcRWyeg6tk1su8EpxLQtgVTJzjYjmBk+lzx47kZ4K2xF+uPBjcPJonzo1MHoYFADFZyUsP3k2ny88nWPmWusT87ez92bDYRvnxt6bvHD+Ix0KhQ4V+r6PR7llfrC4NH87e28WQP6AhXaYzo9/mJn45OOZgYGBVF8yaQPARqXilUql8s8Lv2QXlx7+F6Z2tXA2DCM5PHxmCAAeP14pKKX+F+e/AdWOS42NKr/KAAAAAElFTkSuQmCC">NAME OF BOOKMARKLET HERE</A>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接