如何获取网站icon有哪些可行的方法


Posted in Javascript onJune 05, 2014

获取网站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) + "'></li>"; 
}); 
}; 
</script> 
</body> 
</html>

源代码下载
Javascript 相关文章推荐
JavaScript Konami Code 实现代码
Jul 29 Javascript
ie下jquery.getJSON的缓存问题的处理方法
Mar 29 Javascript
获取非最后一列td值并将title设为该值的方法
Oct 30 Javascript
21个JavaScript事件(Events)属性汇总
Dec 02 Javascript
javascript实现禁止右键和F12查看源代码
Dec 26 Javascript
JS实现固定在右下角可展开收缩DIV层的方法
Feb 13 Javascript
JavaScript对象反射用法实例
Apr 17 Javascript
js如何判断输入字符串长度
Dec 16 Javascript
JS实现alert中显示换行的方法
Dec 17 Javascript
微信小程序form表单组件示例代码
Jul 15 Javascript
Element-ui el-tree新增和删除节点后如何刷新tree的实例
Aug 31 Javascript
如何让vue长列表快速加载
Mar 29 Vue.js
IE6中链接A的href为javascript协议时不在当前页面跳转
Jun 05 #Javascript
网页右下角弹出窗体实现代码
Jun 05 #Javascript
获取中文字符串的实际长度代码
Jun 05 #Javascript
jQuery文件上传插件Uploadify使用指南
Jun 05 #Javascript
IE6-IE9中tbody的innerHTML不能赋值的解决方法
Jun 05 #Javascript
首页图片漂浮效果示例代码
Jun 05 #Javascript
原生js实现fadein 和 fadeout淡入淡出效果
Jun 05 #Javascript
You might like
新浪新闻小偷
2006/10/09 PHP
对Session和Cookie的区分与解释
2007/03/16 PHP
采用thinkphp自带方法生成静态html文件详解
2014/06/13 PHP
PHP中substr_count()函数获取子字符串出现次数的方法
2016/01/07 PHP
JavaScript中各种编码解码函数的区别和注意事项
2010/08/19 Javascript
什么是DOM(Document Object Model)文档对象模型
2012/03/05 Javascript
from表单多个按钮提交用onclick跳转不同action
2014/04/24 Javascript
jquery实现仿Flash的横向滑动菜单效果代码
2015/09/17 Javascript
超漂亮的Bootstrap 富文本编辑器summernote
2016/04/05 Javascript
jQuery插件FusionCharts绘制的2D帕累托图效果示例【附demo源码】
2017/03/28 jQuery
vue.js之vue-cli脚手架的搭建详解
2017/05/05 Javascript
浅析Javascript中双等号(==)隐性转换机制
2017/10/27 Javascript
在angular 6中使用 less 的实例代码
2018/05/13 Javascript
三种Webpack打包方式(小结)
2018/09/19 Javascript
vue里的data要用return返回的原因浅析
2019/05/28 Javascript
[47:38]Optic vs VGJ.S 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
Python中如何优雅的合并两个字典(dict)方法示例
2017/08/09 Python
Python语言描述最大连续子序列和
2017/12/05 Python
Python实现微信自动好友验证,自动回复,发送群聊链接方法
2019/02/21 Python
Python Pandas数据中对时间的操作
2019/07/30 Python
解决TensorFlow训练内存不断增长,进程被杀死问题
2020/02/05 Python
python GUI库图形界面开发之PyQt5浏览器控件QWebEngineView详细使用方法
2020/02/26 Python
Python+Selenium实现自动化的环境搭建的步骤(图文)
2020/09/01 Python
html5定位获取当前位置并在百度地图上显示
2014/08/22 HTML / CSS
strstr()的简单实现
2013/09/26 面试题
学生个人的自我评价分享
2013/11/05 职场文书
事业单位接收函
2014/01/10 职场文书
护理毕业生自我鉴定
2014/02/11 职场文书
授权委托书范本
2014/04/03 职场文书
暑期培训班策划方案
2014/08/26 职场文书
授权委托书样本及填写说明
2014/09/19 职场文书
2014财产信托协议书范本
2014/11/18 职场文书
2014年消防工作总结
2014/11/21 职场文书
客户答谢会致辞
2015/07/30 职场文书
Eclipse+Java+Swing+Mysql实现电影购票系统(详细代码)
2022/01/18 Java/Android
Android Flutter实现图片滑动切换效果
2022/04/07 Java/Android