如何获取网站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 相关文章推荐
IE和firefox浏览器的event事件兼容性汇总
Dec 06 Javascript
关于火狐(firefox)及ie下event获取的两种方法
Dec 27 Javascript
jquery 利用show和hidden实现级联菜单示例代码
Aug 09 Javascript
js与jquery分别实现tab标签页功能的方法
Nov 18 Javascript
基于Vue.js实现简单搜索框
Mar 26 Javascript
canvas绘制环形进度条
Feb 23 Javascript
react开发中如何使用require.ensure加载es6风格的组件
May 09 Javascript
Angularjs 与 bower安装和使用详解
May 11 Javascript
11行JS代码制作二维码生成功能
Mar 09 Javascript
vue防止花括号{{}}闪烁v-text和v-html、v-cloak用法示例
Mar 13 Javascript
vuex入门最详细整理
Mar 04 Javascript
JavaScript 几种循环方式以及模块化的总结
Sep 03 Javascript
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
php 运行效率总结(提示程序速度)
2009/11/26 PHP
CURL状态码列表(详细)
2013/06/27 PHP
如何使用php判断服务器是否是HTTPS连接
2013/07/05 PHP
PHP通过插入mysql数据来实现多机互锁实例
2014/11/05 PHP
详谈php中 strtr 和 str_replace 的效率问题
2017/05/14 PHP
PHP序列化和反序列化深度剖析实例讲解
2020/12/29 PHP
JavaScript 设计模式之组合模式解析
2010/04/09 Javascript
JS将秒换成时分秒实现代码
2013/09/03 Javascript
jquery获取一组checkbox的值(实例代码)
2013/11/04 Javascript
javascript中利用柯里化函数实现bind方法【推荐】
2016/04/29 Javascript
Bootstrap 模态框实例插件案例分析
2016/12/28 Javascript
jQuery简单实现对数组去重及排序操作实例
2017/10/31 jQuery
详解JS模块导入导出
2017/12/20 Javascript
浅谈关于JS下大批量异步任务按顺序执行解决方案一点思考
2019/01/08 Javascript
vue2.0基于vue-cli+element-ui制作树形treeTable
2019/04/30 Javascript
nodemon实现Typescript项目热更新的示例代码
2019/11/19 Javascript
Vue中通过属性绑定为元素绑定style行内样式的实例代码
2020/04/30 Javascript
基于js实现数组相邻元素上移下移
2020/05/19 Javascript
vue实现PC端分辨率适配操作
2020/08/03 Javascript
JavaScript实现随机点名小程序
2020/10/29 Javascript
python使用smtplib模块通过gmail实现邮件发送的方法
2015/05/08 Python
Python解析nginx日志文件
2015/05/11 Python
python3操作微信itchat实现发送图片
2018/02/24 Python
Python pandas.DataFrame调整列顺序及修改index名的方法
2019/06/21 Python
python sklearn库实现简单逻辑回归的实例代码
2019/07/01 Python
python3实现mysql导出excel的方法
2019/07/31 Python
对python中return与yield的区别详解
2020/03/12 Python
解决django migrate报错ORA-02000: missing ALWAYS keyword
2020/07/02 Python
详解HTML5中的拖放事件(Drag 和 drop)
2016/11/14 HTML / CSS
HTML5 实现图片上传预处理功能
2020/02/06 HTML / CSS
城野医生官方海外旗舰店:风靡亚洲毛孔收敛水
2018/04/26 全球购物
Gloeilampgoedkoop荷兰:在线购买灯泡
2019/02/16 全球购物
怎样声明子类
2013/07/02 面试题
2015年女生节活动总结
2015/02/27 职场文书
简历自我评价优缺点
2015/03/11 职场文书
《地。-关于地球的运动-》单行本第七集上市,小说家朝井辽献上期待又害怕的推荐文
2022/03/31 日漫