将favicon添加到javascript书签(使用window.open)

问题描述 投票:36回答:5

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

我对问题的理解:

Favicon易于理解,是HTML文档开头的链接。当通过引用将实际站点添加为书签时,浏览器可以拉出该标签。但是,如您所见,我的小书签是从没有HTML的javascript启动代码中删除的,因此没有指向favicon的链接。我还没有准备好放弃,我觉得可以进行一些注射...

截至目前,bookmarklet启动代码如下:

当前脚本-小书签,没有收藏夹(请注意,所有代码均以换行符格式设置-不适用于所有浏览器,通常只有一行)

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链接和<head>中的启动脚本的HTML文件。但是,我不希望在带有空白HTML文件的新选项卡中打开该文件,然后启动弹出窗口。解决方法..?


存在类似的问题,但我似乎没有找到想要的答案:

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

正在运行的javascript网站图标的来源(但是,没有书签):

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

我会对您目前在此方面的知识/想法感兴趣

javascript bookmarklet favicon
5个回答
6
投票

我尝试过的某些事情可能会使您走得更远:

将新的链接元素添加到当前文档:

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,在尝试创建元素时,我一直收到无效字符,因此我必须进行分段属性设置。

使用URI模式的“ data:image / png; base64,iVBORw0KGgoAAAA ...”使用base64编码的图像字符串,但是由于我仍然必须将其设置为当前HTML文本,因此没有任何帮助(我可以这样做,但遇到上面没有书签的问题。)>

也许由于跨站点脚本问题而不能这样做?不确定...不管哪种方式,真的很想知道您的想法(如果您想出任何办法)。


4
投票

我尝试并重试,我的第一个结论是:“无法完成(至少不能在Ubuntu 11.04的FF4中实现)”。您(我想)需要为您的网站访问者提供一个简单的解决方案(拖放,一键添加书签...)。


1
投票

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

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


0
投票

链接无效。希望能帮助到你。 mozilla api的更改又有另一个受害者


-2
投票

这可能不是您想要的解决方案,特别是如果您不使用Firefox,但是我使用名为Bookmark Favicon Changer的加载项在我的书签上设置图标,效果很好。

© www.soinside.com 2019 - 2024. All rights reserved.