Heim >Web-Frontend >HTML-Tutorial >如何获取网站icon_html/css_WEB-ITnose
如何获取网站icon_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:04:481272Durchsuche
获取网站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>
源代码下载：http://files.cnblogs.com/shinnyChen/getIcon.rar
Stellungnahme：
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
Vorheriger Artikel：UVA 11361Nächster Artikel：html提取通用的元素_html/css_WEB-ITnose