Question

我需要一种方法从通用网页获取favicon的URL，因为favicon并不总是在基本网址上。

P.S。不使用外部服务或库。

Answer 1

对于仍未使用上述代码获取图标的人;

大多数浏览器都支持通过自己发送请求（/favicon.ico）来获取图标，而不是在html中。
另一种解决方案由Google提供。

要获取域的favicon，请使用：
https://plus.google.com/_/favicon?domain=www.stackoverflow.com

要获取网址的网站图标，请使用：
https://plus.google.com/_/favicon?domain_url=http://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元素，否则favicon位于<link rel="icon" href="...">。因此，您可以通过link elements获取所有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;
}

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

4 个答案: