如何获取网站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 相关文章推荐
innerHTML 和 getElementsByName 在IE下面的bug 的解决
Apr 09 Javascript
用JS提交参数创建form表单在FireFox中遇到的问题
Jan 16 Javascript
jQuery控制输入框只能输入数值的小例子
Mar 20 Javascript
JavaScript四种调用模式和this示例介绍
Jan 02 Javascript
js限制文本框只能输入整数或者带小数点的数字
Apr 27 Javascript
解决AngualrJS页面刷新导致异常显示问题
Apr 20 Javascript
利用jquery如何从json中读取数据追加到html中
Dec 01 jQuery
vuex进阶知识点巩固
May 20 Javascript
JavaScript 正则命名分组【推荐】
Jun 07 Javascript
详解Vue用cmd创建项目
Feb 12 Javascript
vue slot与传参实例代码讲解
Apr 28 Javascript
vue实现给div绑定keyup的enter事件
Jul 31 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
swfupload 多文件上传实现代码
2008/08/27 PHP
php 文件上传类代码
2011/08/06 PHP
php防止sql注入代码实例
2013/12/18 PHP
PHP生成word文档的三种实现方式
2016/11/14 PHP
laravel ORM关联关系中的 with和whereHas用法
2019/10/16 PHP
Aster vs Newbee BO3 第三场2.18
2021/03/10 DOTA
Jquery截取中文字符串的实现代码
2010/12/22 Javascript
jquery通过ajax加载一段文本内容的方法
2015/01/15 Javascript
JS实现一个按钮的方法
2015/02/05 Javascript
Nodejs学习笔记之测试驱动
2015/04/16 NodeJs
JavaScript中this详解
2015/09/01 Javascript
jQuery Validation Plugin验证插件手动验证
2016/01/26 Javascript
全面解析bootstrap格子布局
2016/05/22 Javascript
解决bootstrap导航栏navbar在IE8上存在缺陷的方法
2016/07/01 Javascript
Node.js开发第三方微信公众平台
2017/06/05 Javascript
详解node.js中的npm和webpack配置方法
2018/01/21 Javascript
vue-cli创建的项目,配置多页面的实现方法
2018/03/15 Javascript
Vue.js子组件向父组件通信的方法实例代码详解
2018/12/10 Javascript
Vue CLI 2.x搭建vue(目录最全分析)
2019/02/27 Javascript
JS原生瀑布流效果实现
2019/04/26 Javascript
jQuery实现轮播图效果
2019/11/26 jQuery
基于JS实现计算24点算法代码实例解析
2020/07/23 Javascript
利用js canvas实现五子棋游戏
2020/10/11 Javascript
原生JS生成指定位数的验证码
2020/10/28 Javascript
flask-socketio实现WebSocket的方法
2018/07/31 Python
anaconda如何查看并管理python环境
2019/07/05 Python
Python程序暂停的正常处理方法
2019/11/07 Python
Python random模块的使用示例
2020/10/10 Python
联想台湾官网:Lenovo TW
2018/05/09 全球购物
大学生村官任职感言
2014/01/09 职场文书
课改先进个人汇报材料
2014/01/26 职场文书
三严三实对照检查材料
2014/09/22 职场文书
Python实现DBSCAN聚类算法并样例测试
2021/06/22 Python
DIV CSS实现网页背景半透明效果
2021/12/06 HTML / CSS
python接口测试返回数据为字典取值方式
2022/02/12 Python
python Tkinter模块使用方法详解
2022/04/07 Python