Получить значок сайта с JS - PullRequest
       30

Получить значок сайта с JS

36 голосов
/ 13 января 2010

Мне интересно, возможно ли получить значок сайта по URL-адресу с JavaScript.

Например, у меня есть URL http://www.bbc.co.uk/, и я хотел бы получить путь к значку favicon, описанному в <link rel="icon" .../> meta tag - http://www.bbc.co.uk/favicon.ico.

У меня много URL-адресов, поэтому не следует загружать каждую страницу и искать тег link, я думаю.

Есть идеи?

Ответы [ 5 ]

50 голосов
/ 07 октября 2010

Вот 2 рабочих варианта, я протестировал более 100 URL и получил разные результаты, каждый из которых. Обратите внимание, что это решение не JS, но JS может не потребоваться.

<!-- Free --> 
<img height="16" width="16" src='http://www.google.com/s2/favicons?domain=www.edocuments.co.uk' />
<!-- Paid -->
<img height="16" width="16" src='http://grabicon.com/edocuments.co.uk' />
21 голосов
/ 13 января 2010

Внезапно я нашел что-то под названием Google Shared Stuff, которое возвращает изображение с иконкой сайта по имени хоста:

http://www.google.com/s2/favicons?domain=www.domain.com

Но для сайта BBC он возвращает favicon немного меньше. Для сравнения:

http://www.google.com/s2/favicons?domain=www.bbc.co.uk
http://www.bbc.co.uk/favicon.ico

15 голосов
/ 13 января 2010

Вы можете использовать YQL для этого

http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20html%20where%20url%3D"http://bbc.co.uk/"and%20xpath%3D"/html/head/link[@rel%3D'icon']%20|%20/html/head/link[@rel%3D'ICON']%20|%20/html/head/link[@rel%3D'shortcut%20icon']%20|%20/html/head/link[@rel%3D'SHORTCUT%20ICON']"&format=json&callback=grab

Этот запрос используется Показать сценарий Favicons Greasemonkey .

Вы можете писать запросы в консоли YQL, но для этого требуется авторизоваться (кстати, запросы не делают):

http://developer.yahoo.com/yql/console/#h=select%20*%20from%20html%20where%20url%3D%22http%3A//bbc.co.uk/%22and%20xpath%3D%22/html/head/link%5B@rel%3D%27icon%27%5D%20%7C%20/html/head/link%5B@rel%3D%27ICON%27%5D%20%7C%20/html/head/link%5B@rel%3D%27shortcut%20icon%27%5D%20%7C%20/html/head/link%5B@rel%3D%27SHORTCUT%20ICON%27%5D%22

Это лучше, чем http://www.google.com/s2/favicons?domain=www.domain.com , в случае, если favicon существует, но не находится в domain.com/favicon.ico

1 голос
/ 11 апреля 2016

После 30 000 - 40 000 тестов я заметил, что вы действительно сталкиваетесь с множеством различных ситуаций, с которыми нужно работать.

Отправной точкой является, конечно, где-нибудь, чтобы только посмотреть на тег rel и найти его, но по пути вы найдете все больше и больше ситуаций, которые вам придется охватить.

На тот случай, если кто-нибудь посмотрит эту ветку и попытается приблизиться к 100% совершенству, я загрузил свой (PHP) код здесь: https://plugins.svn.wordpress.org/wp-favicons/trunk/includes/server/class-http.php. Это часть (GPL) плагина WordPress, который извлекает Favicons, более или меньше по запросу тогда, из-за ограничений стандартного Google (как упомянуто выше). Код находит значительно больше значков, чем код Google. Но также включает в себя Google и других в качестве поставщиков изображений для сокращения дальнейших итераций при попытке получить значок.

Когда вы читаете код, вы, вероятно, увидите некоторые ситуации, с которыми вы столкнетесь, например, данные base64, страницы перенаправляются на 404 страницы или перенаправляются раз в миллионы раз, извлекаются странные коды состояния HTTP и приходится проверять правильность каждого возможного кода возврата HTTP, сами значки имеют неправильный тип mime, теги обновления на стороне клиента, значки в корневая папка и ничего в html-коде и т.д ... и т.д ... и т.д ...

Если вы зайдете в каталог, то найдете другие классы, которые затем будут хранить фактические значки в соответствии с их URL-адресом (и, конечно же, вам нужно будет выяснить, какие «ветви» используют один и тот же значок, а какие нет), и найти если они принадлежат одному «владельцу» или действительно являются разными частями, но находятся в одном домене.

0 голосов
/ 19 октября 2011

Отказ от ответственности: я создал этот сервис самостоятельно, но вы можете попробовать http://grabicon.com. Это очень простой API для favicons, который обрабатывает изменение размера и переформатирование на лету. Он также использует много активного кэширования для скорости. Как и большинство других подобных сервисов, вы можете вставить это прямо в ваш HTML, и он отлично работает. У меня пока нет онлайн-документации, но вот несколько примеров использования всеми любимого веб-сайта:

Получить иконку в формате PNG:

http://grabicon.com/icon?domain=microsoft.com

Размер до квадрата 64 пикселей:

http://grabicon.com/icon?domain=microsoft.com&size=64

Это позволяет отследить значок с помощью различных методов, которые могут их реализовать, и использовать версию с самым высоким разрешением, поскольку файлы favicon.ico на самом деле содержат коллекцию иконок. Эта версия используется для изменения размера по вашему усмотрению, если идеальное совпадение уже доступно.

Дайте мне знать, что вы, ребята, думаете, и какие еще функции вам могут понравиться!

UPDATE:

Грабикон сейчас снова работает и никуда не денется. Первоначально он был построен для клиента, который впоследствии решил не поддерживать его. Но теперь это под моим непосредственным руководством, с гораздо лучшей скоростью и возможностью изменения размера.

...