> 웹 프론트엔드 > HTML 튜토리얼 > 如何获取网站icon_html/css_WEB-ITnose

如何获取网站icon_html/css_WEB-ITnose

WBOY
풀어 주다: 2016-06-24 12:04:48
원래의
1270명이 탐색했습니다.

获取网站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

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿