如何獲取網(wǎng)站icon有哪些可行的方法
更新時間：2014年06月05日 17:05:47 作者：
獲取網(wǎng)站icon，常用最簡單的方法就是通過website/favicon.ico來獲取，還可以通過google提供的服務來實現(xiàn)，下面有個示例
獲取網(wǎng)站icon，常用最簡單的方法就是通過website/favicon.ico來獲取，不過由于很多網(wǎng)站都是在頁面里面設置favicon，所以此方法很多情況都不可用。
更好的辦法是通過google提供的服務來實現(xiàn)：
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="輸入多個網(wǎng)址以空格間隔"></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) + "'></li>";
});
};
</script>
</body>
</html>
源代碼下載
更好的辦法是通過google提供的服務來實現(xiàn)：
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="輸入多個網(wǎng)址以空格間隔"></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) + "'></li>";
});
};
</script>
</body>
</html>
源代碼下載
相關文章
這是一個實驗用的玩意，它可以克隆指定元素的最終樣式，并包裝成一個css類，它還可以證明Oprea 11.10 是個混球2011-10-10
本文介紹一下js如何高效來拼裝字符串的方法，希望大家看了以后多用效率高的代碼，不要讓客戶端瀏覽器執(zhí)行的太慢，提高用戶體驗。2010-04-04
下面小編就為大家?guī)硪黄猨avascript中的后退和刷新實現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-11-11
JavaScript針對網(wǎng)頁節(jié)點的增刪改查用法實例
這篇文章主要介紹了JavaScript針對網(wǎng)頁節(jié)點的增刪改查用法,實例分析了JavaScript操作網(wǎng)頁節(jié)點的技巧,非常具有實用價值,需要的朋友可以參考下2015-02-02
這篇文章主要介紹了js如何判斷用戶是在PC端和還是移動端訪問,需要的朋友可以參考下2014-04-04
JavaScript setTimeout使用閉包功能實現(xiàn)定時打印數(shù)值
這篇文章主要介紹了JavaScript setTimeout使用閉包功能實現(xiàn)定時打印數(shù)值 的相關資料,需要的朋友可以參考下2015-12-12
使用ajax的post同步執(zhí)行(實現(xiàn)方法)
下面小編就為大家分享一篇使用ajax的post同步執(zhí)行(實現(xiàn)方法)，具有很好的參考價值，希望對大家有所幫助2017-12-12
iframe的onreadystatechange事件在firefox下的使用
firefox不支持iframe的onreadystatechange事件，不過有個方法可以實現(xiàn)同等的效果,需要的朋友可以參考下2014-04-04
本文主要介紹了js對table和ul li實現(xiàn)前臺分頁,需要的朋友可以參考下2014-02-02
javascript 漢字轉(zhuǎn)拼音實現(xiàn)代碼
主要是提前定義了很多文字，這樣的方法不是很是，如果庫中沒有這個詞，是看不到相關信息的。2009-12-12