添加favicon to JavaScript Bookmarklet（使用window.open）
我有一个小书签，它启动了一个window.open javascript函数，用我的小书签打开一个小窗口 – 一个用于在任何被浏览的网站和我的服务器之间进行通信的外部特征。 当书签添加到书签工具栏时，我想要显示一个图标 。 我意识到bookmarklet是javascript，没有绑定的域名，所以要实现这个目标要么很困难，要么是不可能的。
我对这个问题的理解：
Favicons很容易理解，是HTML文档头部的一个链接。 浏览器可以通过引用为实际网站添加书签时提取此信息。 然而，正如你看到我的小书签跑了一个JavaScript的启动代码，不存在HTML，因此没有链接到一个网站图标 。 我还没有准备好放弃，我觉得有一些注射可以做…
截至目前，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' )); 我发现一个解决scheme最接近的东西如下，但它不会打开一个新的窗口 – 只是创build一个新的选项卡与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>';
我已经尝试了两者的组合，但似乎没有使用图标。 我很想知道是否有人可以看到一种解决方法..我认为这可能是可能的，我只是不认为它正确设置，因为我一直在尝试。
我的两个书签的混合，但没有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);
我做的是使用HTML结构之前触发window.open（），这成功地打开了我的书签在一个新的窗口，但没有collections夹图标出现的书签图标。
逻辑解决scheme：
我的想法是将小书签指向一个页面，该页面只是一个HTML文件，其中包含一个favicon链接，并在<head>包含启动脚本。 不过，我不希望在一个新的选项卡打开一个空白的HTML文件，然后启动一个popup窗口..解决方法..？
有一个类似的问题，但我似乎没有find我正在寻找的答案：
小书签拖到工具栏时如何设置图标/图标？
为工作的JavaScript favicon的源代码（不书签然而）：
我会对你目前的知识/想法感兴趣
我尝试过的一些事情可能会让你多一点：
追加一个新的链接元素到当前文档：
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);
请注意，由于IEtesting，我使用的是querySelector（尽pipe也适用于现代浏览器）。 使用Chrome和FF时，在创build元素时我一直收到无效字符，所以我不得不做分段属性设置。
尝试使用base64编码的图像string使用“data：image / png; base64，iVBORw0KGgoAAAA …”URI模式，但这并没有什么帮助，因为我仍然不得不将它设置为当前的HTML文本我可以这样做，但遇到了同样的问题，因为你上面没有小书签）。
也许这是由于跨站点脚本问题而无法完成的？ 不知道…无论哪种方式，真的好奇，看看你想出了什么（如果你设法得到任何东西）。
我试过并重试，我的第一个结论是：“这是不能做到的（至less在Ubuntu 11.04的FF4中）”。 你需要（我猜）一个简单的解决scheme为您的网站访客（拖放，添加书签1点击…）。
我find了一个解决方法，这是它的工作，但它是一个小错误（也许有人可以帮助解决它）。
优点：
- 给小书签添加一个图标
- 它使用windows.open
- 不会留下空白页面
缺点：
- 它重新加载当前页面（而不是留下页面）
- 不能让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>
这是一个链接，你把你的网页，用户需要拖放这个链接到书签栏（你可以使用像添加书签脚本添加它作为书签1点击），书签没有图标，直到用户点击它至less一次。
所以它如何工作：
1.将用户redirect到小书签生成的HTML页面（使ICON可用）
2. onLoad打开你需要的窗口，使用“ windows.open ”
3.使用“ history.back（-1） ”redirect页面
从理论上讲，快速发生的速度非常快，用户不会看到新的页面，只是当前页面正在重新加载，而出现新的窗口。
问题：
1.我使用setTimeout为history.back因为window.open被Firefox阻止，所以我需要点击每一次允许（如果有人可以修复这个…我们有机会使用这个，进一步发展:)）
我知道这不是一个可靠的解决scheme，但这是迄今为止唯一的解决scheme。
希望这有所帮助。 🙂
“我不想在一个新的选项卡打开一个空白的HTML文件，然后启动一个popup窗口..解决方法..？”
如果你真的是视觉效果，你可以尝试在隐藏的iframe中启动空白HTML，然后启动JavaScript。
希望有所帮助
这可能不是你想要的解决scheme，特别是如果你不使用Firefox，但我使用一个名为Bookmark Favicon Changer的插件来设置我的书签上的图标，它的效果很好。
