如何获取网站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 相关文章推荐
jQuery.prototype.init选择器构造函数源码思路分析
Feb 05 Javascript
js open() 与showModalDialog()方法使用介绍
Sep 10 Javascript
JavaScript中使用typeof运算符需要注意的几个坑
Nov 08 Javascript
jQuery实现数字加减效果汇总
Dec 16 Javascript
javascript获取四位数字或者字母的随机数
Jan 09 Javascript
js实现仿QQ秀换装效果的方法
Mar 04 Javascript
在AngularJS应用中实现一些动画效果的代码
Jun 18 Javascript
基于JavaScript实现Json数据根据某个字段进行排序
Nov 24 Javascript
Vue.js每天必学之过滤器与自定义过滤器
Sep 07 Javascript
微信公众号生成新浪短网址的实现(快速生成)
Aug 18 Javascript
解决layui 表单元素radio不显示渲染的问题
Sep 04 Javascript
Javascript中async与await的捕捉错误详解
Mar 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数组函数序列之ksort()对数组的元素键名进行升序排序,保持索引关系
2011/11/02 PHP
PHP序列化操作方法分析
2016/09/28 PHP
PHP合并数组的2种方法小结
2016/11/24 PHP
php出租房数据管理及搜索页面
2017/05/23 PHP
laravel-admin自动生成模块,及相关基础配置方法
2019/10/08 PHP
js数值和和字符串进行转换时可以对不同进制进行操作
2014/03/05 Javascript
js小数运算出现多位小数如何解决
2015/10/08 Javascript
轻松学习jQuery插件EasyUI EasyUI创建RSS Feed阅读器
2015/11/30 Javascript
纯JS打造网页中checkbox和radio的美化效果
2016/10/13 Javascript
概述javascript在Google IE中的调试技巧
2016/11/24 Javascript
jQuery Validate插件自定义验证规则的方法
2016/12/27 Javascript
angular4 JavaScript内存溢出问题
2018/03/06 Javascript
详解VS Code使用之Vue工程配置format代码格式化
2019/03/20 Javascript
JS+html5实现异步上传图片显示上传文件进度条功能示例
2019/11/09 Javascript
js实现飞机大战游戏
2020/08/26 Javascript
详解JavaScript 事件流
2020/09/02 Javascript
Python MySQLdb Linux下安装笔记
2015/05/09 Python
详解python时间模块中的datetime模块
2016/01/13 Python
理解生产者消费者模型及在Python编程中的运用实例
2016/06/26 Python
Python实现图片转字符画的示例
2017/08/22 Python
tensorflow建立一个简单的神经网络的方法
2018/02/10 Python
python生成tensorflow输入输出的图像格式的方法
2018/02/12 Python
利用Python如何批量更新服务器文件
2018/07/29 Python
Python的iOS自动化打包实例代码
2018/11/22 Python
Python线性拟合实现函数与用法示例
2018/12/13 Python
详解Python:面向对象编程
2019/04/10 Python
Python opencv实现人眼/人脸识别以及实时打码处理
2019/04/29 Python
PyTorch基本数据类型(一)
2019/05/22 Python
python查找重复图片并删除(图片去重)
2019/07/16 Python
jupyter notebook 的工作空间设置操作
2020/04/20 Python
10个很棒的 CSS3 开发工具 推荐
2011/05/16 HTML / CSS
HTML5添加鼠标悬浮音响效果不使用FLASH
2014/04/23 HTML / CSS
会计电算化应届生求职信
2013/11/03 职场文书
法院四风对照检查材料思想汇报
2014/10/06 职场文书
2014年学生会干事工作总结
2014/11/07 职场文书
SQL中去除重复数据的几种方法汇总(窗口函数对数据去重)
2023/05/08 MySQL