zoukankan      html  css  js  c++  java
  • 如何获取网站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;
             1000px;
        }
        #submit {
            height: 30px;
            text-align: center;
            color: #ffffff;
            line-height: 30px;
             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 = ' 
    
    	fx0bxa0u2000u2001u2002u2003u2004u2005u2006u2007u2008u2009u200au200bu2028u2029u3000';
            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>
    

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

    后记:

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

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

  • 相关阅读:
    关于JVM的一些想法
    hashMap理解以及jdk1.7、jdk1.8其中区别
    各数据库如何实现自增
    dubbo遇坑记录
    mysql建表语句问题
    @Configuration
    生成一个唯一的ID
    门面模式
    关于getClass().getClassLoader()
    元素链
  • 原文地址:https://www.cnblogs.com/shinnyChen/p/3722562.html
Copyright © 2011-2022 走看看