如何获取网站icon

获取网站icon,常用最简单的方法就是通过website/favicon.ico来获取,不过由于很多网站都是在页面里面设置favicon(<link rel="shortcut icon"  href="http://example.com/favicon.ico" />),所以此方法很多情况都不可用。

更好的办法是通过google提供的服务来实现:http://www.google.com/s2/favicons?domain=http://www.baidu.com

代码:

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <style type="text/css">
    #input {
        height: 300px;
        padding: 10px 5px;
        line-height: 20px;
        width: 1000px;
    }
    #submit {
        height: 30px;
        text-align: center;
        color: #ffffff;
        line-height: 30px;
        width: 80px;
        background-color: blue;
        margin-top: 20px;
    }
    #result {
        margin-top: 20px;
    }
    #result li {
        height: 40px;
        line-height: 40px;
        float: left;
        margin: 10px 14px;
    }
    </style>
</head>

<body>
    <textarea id="input" placeholder="输入多个网址以空格间隔"></textarea>
    <div id="submit">获取icon</div>
    <ul id="result">

    </ul>

    <script type="text/javascript">
    var input = document.getElementById("input");
    var submit = document.getElementById("submit");
    var result = document.getElementById("result");
    var val;

    function trim(str) {
        var whitespace = ' \n\r\t\f\x0b\xa0\u2000\u2001\u2002\u2003\u2004\u2005\u2006\u2007\u2008\u2009\u200a\u200b\u2028\u2029\u3000';
        for (var i = 0, len = str.length; i < len; i++) {
            if (whitespace.indexOf(str.charAt(i)) === -1) {
                str = str.substring(i);
                break;
            }
        }
        for (i = str.length - 1; i >= 0; i--) {
            if (whitespace.indexOf(str.charAt(i)) === -1) {
                str = str.substring(0, i + 1);
                break;
            }
        }
        return whitespace.indexOf(str.charAt(0)) === -1 ? str : '';
    }

    function getFavIconUrl(url) {
        var prohost;
        prohost = url.match(/([^:\/?#]+:\/\/)?([^\/@:]+)/i);
        prohost = prohost ? prohost : [true, "http://", document.location.hostname];

        //补全url
        if (!prohost[1]) {
            prohost[1] = "http://";
        }
        //抓取ico
        return "http://www.google.com/s2/favicons?domain=" + prohost[1] + prohost[2];
    }
    submit.onclick = function() {
        val = input.value;
        if (!val) alert("输入为空!");
        val = val.split(" ");
        val.forEach(function(item) {
        	item = trim(item);
            if (!item) return;
            result.innerHTML += "<li>" + item + "<img src='" + getFavIconUrl(item) + "'></li>";
        });
    };
    </script>
</body>

</html>

 

源代码下载:https://files.cnblogs.com/shinnyChen/getIcon.rar

 

后记:

对于国内的网站,也可以使用360的服务:

http://cdn.website.h.qhimg.com/index.php?domain=www.baidu.com

posted @ 2014-05-11 23:33  shinnyChen  阅读(1355)  评论(4编辑  收藏  举报