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

将favicon添加到javascript Bookmarklet(使用window.open),javascript,bookmarklet,favicon,Javascript,Bookmarklet,Favicon,我有一个bookmarklet,它可以启动window.openJavaScript函数,用我的bookmarklet打开一个小窗口——这是一个外部功能,用于在任何访问过的站点和我的服务器之间进行通信。我希望在将bookmarklet添加到书签工具栏时显示一个favicon。我意识到bookmarklet是javascript,没有绑定到它的域,所以要实现这个目标将是困难的或不可能的 我对这个问题的理解是: Favicon很容易理解,它是HTML文档头部的一个链接。当通过引用为实际站点添加书签时

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

我对这个问题的理解是:

Favicon很容易理解,它是HTML文档头部的一个链接。当通过引用为实际站点添加书签时,浏览器可以将其拉入。但是,正如您所看到的,我的bookmarklet是从javascript启动代码运行的,其中不存在HTML,因此没有指向favicon的链接。我还没准备好放弃,但我觉得有一些注射是可以做的

到目前为止,bookmarklet启动代码如下所示:

当前脚本——bookmarklet,没有favicon(注意所有代码都是用换行符格式化的——不会在所有浏览器中工作,通常只有一行)


我发现的最接近解决方案如下,但它不会打开一个新窗口——只会创建一个以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:'
你好,世界
你好,世界
';

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

我的两个混血儿——bookmarklet但没有favicon

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);
javascript:'
你好,世界
“你好,世界”;
打开窗户http://mydomain.com/bookmarklet/form?u='
+encodeURIComponent(location.href)+
“&t=”+encodeURIComponent(document.title),
"测试",,
'状态=0,工具栏=0,位置=0,菜单栏=0,可调整大小=false,
滚动条=假,高度=379,宽度=379’。空(0);
我所做的是在启动window.open()之前使用html结构,这成功地在一个新窗口中打开了我的bookmarklet,但没有为书签图标显示favicon


逻辑解决方案:

我的想法是让bookmarklet指向一个页面,该页面只是一个带有favicon链接的HTML文件,并且在
中有启动脚本。但是,我不希望在一个新选项卡中打开一个空白HTML文件,然后启动弹出窗口。。解决方法


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

工作javascript favicon的源代码(但是没有bookmarklet):

我想知道您目前对此的了解/想法是什么“我不希望在新选项卡中打开一个空白HTML文件,然后弹出一个弹出窗口..解决方法..”

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


希望这对我有所帮助,我试了又试,我的第一个结论是:“这不可能做到(至少在Ubuntu 11.04的FF4中是不行的)”。你需要(我猜)一个简单的解决方案为你的网站访问者(拖放,添加书签,点击一次…)

我已经找到了一个解决方法,它确实可以解决问题,但有点问题(也许有人可以帮我解决)。
优点:

  • 将图标添加到bookmarklet
  • 它使用windows.open
  • 不会留下空白页
缺点:

  • 它将重新加载当前页面(而不是留下页面)
  • 无法使Firefox POP ul blocker允许“javascript:”生成的HTML页面加载弹出窗口,所以每次都需要点击“允许”
代码如下:

这是您放在页面上的一个链接,用户需要将此链接拖放到书签栏(您可以使用类似的方法将其添加为书签,只需单击一次),书签在用户至少单击一次之前没有图标

那么它是如何工作的:
1.将用户从bookmarklet重定向到生成的HTML页面(这使得图标成为可能)
2.onLoad使用“windows.open”
3.使用“历史记录。返回(-1)”将页面重定向回

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

问题:
1.我对history.back使用setTimeout,因为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);
注意,我之所以使用querySelector是因为IE测试(尽管在现代浏览器中也可以使用)。使用Chrome和FF时,我在尝试创建元素时不断得到无效字符,因此我必须进行分段属性设置

尝试使用“data:image/png;base64,iVBORw0KGgoAAAA…”URI模式使用base64编码的图像字符串,但这没有任何帮助,因为我仍然必须将其设置为当前HTML文本(我可以这样做,但遇到了与上面相同的问题,即没有bookmarklet)


可能由于跨站点脚本问题而无法执行此操作?不确定。。。不管是哪种方式,我都很想看看你有什么想法(如果你有什么想法的话)。

要创建iFrame,它仍然必须是一个JavaScript链接。这只会使精确的计算变得更加复杂
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);