如何获取网站icon_html/css_WEB-ITnose-html教程-PHP中文网

如何获取网站icon_html/css_WEB-ITnose

php中文网

发布： 2016-06-24 12:04:48

原创

1485人浏览过

获取网站icon，常用最简单的方法就是通过website/favicon.ico来获取，不过由于很多网站都是在页面里面设置favicon，所以此方法很多情况都不可用。

更好的办法是通过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) + "' alt="如何获取网站icon_html/css_WEB-ITnose" ></li>";        });    };    </script></body></html>

登录后复制