将网站图标添加到 javascript Bookmarklet（使用 window.open）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5952387/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Adding favicon to javascript Bookmarklet (uses window.open)
提问by Atticus
I have a bookmarklet that launches a window.open javascript function to open a small window with my bookmarklet -- an external feature used to communicate between any visted site and my server. I'd like for a faviconto show up when the bookmarklet is added to the bookmark toolbar. I realize that the bookmarklet is javascript, there is no domain tied to it so it's going to be either difficult or impossible to achieve this goal.
我有一个书签，它启动一个 window.open javascript 函数，用我的书签打开一个小窗口——一个用于在任何访问过的站点和我的服务器之间进行通信的外部功能。我希望在将书签添加到书签工具栏时显示收藏夹图标。我意识到书签是 javascript，没有绑定到它的域，所以要实现这个目标要么很困难，要么不可能。
My understanding of the problem:
我对问题的理解：
Favicons are easy to understand, a link within the head of an HTML doc. The browser can pull this when bookmarking an actual site by reference. However, as you see my bookmarklet is ran off a javascript launch code where there exists no HTML, therefor no link to a favicon. I'm not ready to give up yet though, I feel that there's some injection that can be made...
图标很容易理解，是 HTML 文档头部的一个链接。当通过引用为实际站点添加书签时，浏览器可以拉取它。但是，正如您所看到的，我的书签是从不存在 HTML 的 javascript 启动代码中运行的，因此没有指向favicon 的链接。不过我还没有准备好放弃，我觉得可以进行一些注射......
As of now, the bookmarklet launch code looks like this:
截至目前，书签启动代码如下所示：
Current Script -- bookmarklet, no favicon (note all code is formated with line breaks -- won't work in all browsers, normally its one line)
当前脚本——书签，没有图标（注意所有代码都用换行符格式化——不适用于所有浏览器，通常只有一行）
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'
));
The closest thing I've found to a solution is as follows, but it doesn't open a new window -- just creates a new tab with the html as the page:
我发现的最接近解决方案的事情如下，但它不会打开一个新窗口 - 只是创建一个带有 html 作为页面的新选项卡：
Working favicon, no bookmarklet window
工作图标，没有书签窗口
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>';
I have tried a combination of the two but it didn't seem to use the icon. I'd be curious to know if anyone can see a type of workaround.. I think it could be possible, I just don't think it's set up correctly as I've been trying.
我尝试了两者的组合，但它似乎没有使用该图标。我很想知道是否有人可以看到一种解决方法..我认为这是可能的，我只是认为它的设置不正确，因为我一直在尝试。
My hybrid of the two -- bookmarklet but no 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);
What I did was use the html structure before firing window.open(), this successfully opened my bookmarklet in a new window, but no favicon showed up for the bookmark icon.
我所做的是在触发 window.open() 之前使用 html 结构，这成功地在新窗口中打开了我的书签，但书签图标没有显示图标。
Logical Solution:
逻辑解决方案：
My thoughts on this would be to have the bookmarklet point to a page that is simply an HTML file with a favicon link and the launch script in the <head>. However, I don't want this opening in a new tab with a blank HTML file that then launches a popup.. Workaround..?
我对此的想法是让书签指向一个页面，该页面只是一个带有网站图标链接的 HTML 文件和<head>. 但是，我不希望此操作在带有空白 HTML 文件的新选项卡中打开，然后启动弹出窗口.. 解决方法..？
There exists a similar question but I did not seem to find the answer I'm looking for:
存在一个类似的问题，但我似乎没有找到我正在寻找的答案：
How to have favicon / icon set when bookmarklet dragged to toolbar?
Source for the working javascript favicon (no bookmarklet however):
工作 javascript favicon 的来源（但是没有书签）：
http://www.tapper-ware.net/blog/?p=97
http://www.tapper-ware.net/blog/?p=97
I'd be interested in what your current knowledge/thoughts on this would be
我会对你目前对此的知识/想法感兴趣
回答by SPFiredrake
Some of the things that I've tried that might possibly get you going a bit more:
我尝试过的一些事情可能会让你走得更远：
Append a new link element to the current document:
向当前文档追加一个新的链接元素：
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);
Note that I was using the querySelector due to IE testing (though works in modern browsers as well). With Chrome and FF, I kept getting invalid character when trying to create the element, so I had to do piecewise attribute setting.
请注意，由于 IE 测试，我使用了 querySelector（尽管也适用于现代浏览器）。使用 Chrome 和 FF 时，我在尝试创建元素时不断收到无效字符，因此我不得不进行分段属性设置。
Tried using base64 encoded image string using the "data:image/png;base64,iVBORw0KGgoAAAA..." URI schema, but that didn't help anything due to the fact that I still had to set it to the current HTML text (which I could do, but ran into the same problem as you above of no bookmarklet).
尝试使用 "data:image/png;base64,iVBORw0KGgoAAAA..." URI 模式使用 base64 编码的图像字符串，但这没有任何帮助，因为我仍然必须将其设置为当前的 HTML 文本（其中我可以做，但遇到了与您上面没有书签的问题相同的问题）。
Maybe this can't be done due to cross site scripting concerns? Not sure... Either way, really curious to see what you come up with (if you manage to come up with anything).
也许由于跨站点脚本问题而无法做到这一点？不确定......不管怎样，真的很想知道你想出了什么（如果你能想出什么的话）。
回答by Radu Maris
I tried and retried, and my first conclusion was: "It can't be done (at least not in FF4 on Ubuntu 11.04)". You need (I guess) a simple solution for your site visitors (drag&drop, add bookmark with 1 click ...).
我试了又试，我的第一个结论是：“它不能完成（至少在 Ubuntu 11.04 的 FF4 中不能）”。您需要（我猜）为您的网站访问者提供一个简单的解决方案（拖放、单击添加书签...）。
I have found a workaround, it does it's job, but it is a little buggy (maybe someone can help fix it).
PROS:
我找到了一个解决方法，它可以完成它的工作，但它有点问题（也许有人可以帮助修复它）。
优点：
- add a icon to the bookmarklet
- it uses windows.open
- doesn't leave empty pages behind
- 向书签添加图标
- 它使用 windows.open
- 不会留下空页
CONS:
缺点：
- it reloads the current page (instead of leave a page behind)
- Can't make Firefox POP-ul blocker allow "javascript:" generated HTML page to load POP-ups, so you need to hit allow every time
- 它重新加载当前页面（而不是留下一个页面）
- 无法让 Firefox POP-ul 拦截器允许“javascript:”生成的 HTML 页面加载 POP-ups，因此您每次都需要点击允许
This is the code:
这是代码：
<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>
<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>
This is a link that you put on your page, the user needs to drag&drop this link to the bookmark bar (you can use something like Add Bookmark Scriptfor adding it as a bookmark with 1 click), The bookmark has no icon until the user click's it at least once.
这是您放在页面上的链接，用户需要将此链接拖放到书签栏（您可以使用诸如添加书签脚本之类的东西，只需单击一下即可将其添加为书签），书签在用户之前没有图标单击它至少一次。
So how it supose to work:
1. redirect the user to the generated HTML page from the bookmarklet (that makes the ICONposible)
2. onLoad open the window you need using "windows.open"
3. redirect the page back using "history.back(-1)"
那么它是如何工作的：
1. 将用户从书签重定向到生成的 HTML 页面（这使得ICON 成为可能）
2. onLoad 使用“ windows.open”打开您需要的窗口
3. 使用“历史记录”将页面重定向回来.back(-1)"
In theory everithing happens so fast, that the user does't see the new page, just that the current page is reloading, and a new windows appear.
从理论上讲，一切都发生得如此之快，以至于用户看不到新页面，只是当前页面正在重新加载，并出现一个新窗口。
The problem:
1. I use setTimeout for history.back beacause window.open is blocked by Firefox, so I need to click allow every single time (if somebody can fix this ... we have a chance of using this, develop it further :) )
问题：
1. 我使用 setTimeout for history.back 因为 window.open 被 Firefox 阻止，所以我需要每次点击允许（如果有人可以解决这个问题......我们有机会使用它，进一步开发它:) )
I know THIS is not a reliable solution, but this is the only solution I've got so far.
我知道这不是一个可靠的解决方案，但这是我迄今为止唯一的解决方案。
Hope this helps a little. :)
希望这有所帮助。:)
回答by Will
"I don't want this opening in a new tab with a blank HTML file that then launches a popup.. Workaround..?"
“我不希望在带有空白 HTML 文件的新选项卡中打开此文件，然后启动弹出窗口.. 解决方法..？”
If what you after really is the visual effect, you can try launch the blank HTML in hidden iframe, then launch the javascript.
如果您真正追求的是视觉效果，您可以尝试在隐藏的 iframe 中启动空白 HTML，然后启动 javascript。
Hope that helps
希望有帮助
回答by chrixian
This might not be the solution you want, especially if you don't use Firefox, but I use an add-on called Bookmark Favicon Changerto set the icon's on my bookmarklets and it works great.
这可能不是您想要的解决方案，尤其是在您不使用 Firefox 的情况下，但我使用名为Bookmark Favicon Changer的附加组件在我的书签上设置图标，并且效果很好。
