如何获取网站icon_html/css_WEB-ITnose

WBOY
Freigeben: 2016-06-24 12:04:48
Original
1256 Leute haben es durchsucht

获取网站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>
Nach dem Login kopieren

 

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

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage