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

Att*_*cus 36 javascript favicon bookmarklet

我有一个bookmarklet,它启动一个window.open javascript函数,用我的bookmarklet打开一个小窗口 - 一个用于在任何访问过的站点和我的服务器之间进行通信的外部功能.当书签工具栏添加到书签工具栏时,我想要显示一个图标.我意识到书签是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'
        ));
Run Code Online (Sandbox Code Playgroud)

我在解决方案中找到的最接近的事情如下,但它没有打开一个新窗口 - 只需创建一个新的选项卡,其中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>';
Run Code Online (Sandbox Code Playgroud)

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

我的两个混合 - 书签,但没有图标

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);
Run Code Online (Sandbox Code Playgroud)

我做的是在触发window.open()之前使用html结构,这在新窗口中成功打开了我的书签,但没有出现书签图标的图标.


逻辑解决方案:

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


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

如何在将bookmarklet拖动到工具栏时设置favicon /图标?

工作javascript favicon的来源(但没有书签):

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

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

SPF*_*ake 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);
Run Code Online (Sandbox Code Playgroud)

请注意,由于IE测试我使用的是querySelector(虽然也适用于现代浏览器).使用Chrome和FF,我在尝试创建元素时不断出现无效字符,所以我不得不进行分段属性设置.

尝试使用base64编码的图像字符串使用"data:image/png; base64,iVBORw0KGgoAAAA ..."URI模式,但由于我仍然必须将其设置为当前的HTML文本(其中我能做到,但遇到了与上面没有书签相同的问题).

由于跨站点脚本问题,可能无法做到这一点?不确定......无论哪种方式,真的很好奇,看看你想出了什么(如果你能想出任何东西).


Wil*_*ill 1

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

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

希望有帮助