javascript - Javascriptの一般的なWebページからファビコンのURLを取得するにはどうすればよいですか？

Question

ファビコンが常にベースURLにあるとは限らないことを考慮して、一般的なWebページからファビコンのURLを取得する方法が必要です。

外部サービスまたはライブラリを使用しないPS。

Answer 1

上記のコードでファビコンをまだ取得していない人のために;

1. /favicon.icoほとんどのブラウザは、htmlではなくリクエスト（）を自分で送信することでファビコンを取得することをサポートしています。

2. 別のソリューションがGoogleによって提供されています。

   ドメインのファビコンを取得するには、次を使用します。
   https://s2.googleusercontent.com/s2/favicons?domain=www.stackoverflow.com

   URLのファビコンを取得するには、次を使用します。
   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"hrefrel"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;
}