javascript - 如何从 Javascript 中的通用网页获取 favicon 的 URL？

Question

考虑到 favicon 并不总是位于基本 url，我需要一种从通用网页获取 favicon 的 URL 的方法。

Ps 不使用外部服务或库。

Answer 1

对于仍然没有使用上述代码获得网站图标的人；

1. 大多数浏览器都支持通过自己发送请求 ( /favicon.ico) 来获取网站图标，而不是在 html 中。

2. Google 提供了另一种解决方案。

   要获取域的 favicon，请使用：
   https://s2.googleusercontent.com/s2/favicons?domain=www.stackoverflow.com

   要获取 URL 的 favicon，请使用：
   https://s2.googleusercontent.com/s2/favicons?domain_url=https://www.stackoverflow.com

Answer 2

这似乎有效：

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());​

或者查看http://jsfiddle.net/PBpgY/3/以获取在线示例。

Answer 3

/favicon.ico除非您有<link rel="icon" href="...">元素，否则图标位于。因此，您可以通过获取所有link元素document.getElementsByTagName，然后查看返回中的每个元素，NodeList看看它们中是否有任何具有rel值的属性"icon"，如果有，请查看它的href. （您也可以查看那些在哪里rel或"shortcut icon"出于"icon shortcut"历史原因的。）

Answer 4

现场工作小提琴示例：http: //jsfiddle.net/sc8qp/2/

只是为了没有正则表达式的良好度量和完整性：

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;
}