如何从 Javascript 中的通用网页获取 favicon 的 URL？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10282939/
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
How to get favicon's URL from a generic webpage in Javascript?
提问by xRobot
I need a way to get the favicon's URL from a generic webpage considering that the favicon is not always at the base url.
考虑到收藏夹图标并不总是位于基本网址，我需要一种方法来从通用网页中获取收藏夹图标的 URL。
P.s. without using an external service or library.
Ps 不使用外部服务或库。
采纳答案by T Zengerink
This seems to work:
这似乎有效：
var getFavicon = function(){
var favicon = undefined;
var nodeList = document.getElementsByTagName("link");
for (var i = 0; i < nodeList.length; i++)
{
if((nodeList[i].getAttribute("rel") == "icon")||(nodeList[i].getAttribute("rel") == "shortcut icon"))
{
favicon = nodeList[i].getAttribute("href");
}
}
return favicon;
}
alert(getFavicon());?
Or have a look at http://jsfiddle.net/PBpgY/3/for an online example.
或者查看http://jsfiddle.net/PBpgY/3/的在线示例。
回答by jerone
For people still not getting the favicon with above codes;
对于仍然没有使用上述代码获得 favicon 的人；
Most browsers support getting the favicon by sending a request (
/favicon.ico) themselves, instead of in the html.Another solution is provided by Google.
To get the favicon for a domain, use:
https://s2.googleusercontent.com/s2/favicons?domain=www.stackoverflow.comTo get the favicon for an URL, use:
https://s2.googleusercontent.com/s2/favicons?domain_url=https://www.stackoverflow.com
大多数浏览器都支持通过
/favicon.ico自己发送请求 ( ) 来获取网站图标，而不是在 html 中。Google 提供了另一种解决方案。
要获取域的图标，请使用：
https://s2.googleusercontent.com/s2/favicons?domain=www.stackoverflow.com要获取 URL 的图标，请使用：
https://s2.googleusercontent.com/s2/favicons?domain_url=https://www.stackoverflow.com
回答by T.J. Crowder
The favicon is at /favicon.icounless you have a <link rel="icon" href="...">element. So you can get all of the linkelementsvia document.getElementsByTagNameand then look at each of the elements in the returned NodeListto see if any of them have the attribute relwith the value "icon"and, if so, look at its href. (You might also look at ones where relis "shortcut icon"or "icon shortcut"for historical reasons.)
/favicon.ico除非您有<link rel="icon" href="...">元素，否则图标位于。所以，你可以得到所有的link元素通过document.getElementsByTagName再看看每一个在返回的元素NodeList，看看其中是否有属性rel与价值"icon"，如果是这样，看看它href。（您也可以看看那些地方rel是"shortcut icon"或"icon shortcut"历史原因。）
回答by Metricton
Live working fiddle example: http://jsfiddle.net/sc8qp/2/
现场工作小提琴示例：http: //jsfiddle.net/sc8qp/2/
Just for good measure and completeness without regex:
只是为了没有正则表达式的良好度量和完整性：
function getIcons() {
var links = document.getElementsByTagName('link');
var icons = [];
for(var i = 0; i < links.length; i++) {
var link = links[i];
//Technically it could be null / undefined if someone didn't set it!
//People do weird things when building pages!
var rel = link.getAttribute('rel');
if(rel) {
//I don't know why people don't use indexOf more often
//It is faster than regex for simple stuff like this
//Lowercase comparison for safety
if(rel.toLowerCase().indexOf('icon') > -1) {
var href = link.getAttribute('href');
//Make sure href is not null / undefined
if(href) {
//Relative
//Lowercase comparison in case some idiot decides to put the
//https or http in caps
//Also check for absolute url with no protocol
if(href.toLowerCase().indexOf('https:') == -1 && href.toLowerCase().indexOf('http:') == -1
&& href.indexOf('//') != 0) {
//This is of course assuming the script is executing in the browser
//Node.js is a different story! As I would be using cheerio.js for parsing the html instead of document.
//Also you would use the response.headers object for Node.js below.
var absoluteHref = window.location.protocol + '//' + window.location.host;
if(window.location.port) {
absoluteHref += ':' + window.location.port;
}
//We already have a forward slash
//On the front of the href
if(href.indexOf('/') == 0) {
absoluteHref += href;
}
//We don't have a forward slash
//It is really relative!
else {
var path = window.location.pathname.split('/');
path.pop();
var finalPath = path.join('/');
absoluteHref += finalPath + '/' + href;
}
icons.push(absoluteHref);
}
//Absolute url with no protocol
else if(href.indexOf('//') == 0) {
var absoluteUrl = window.location.protocol + href;
icons.push(absoluteUrl);
}
//Absolute
else {
icons.push(href);
}
}
}
}
}
return icons;
}
