Одно из неприятных явлений в Интернете — это «битые» ссылки, в частности ссылки на картинки. Сайты могут закрываться, переезжать, менять свою структуру, это естественный процесс. Хуже, когда от этого страдает ваш сайт. Если на сайте всего несколько страниц, то «битые» картинки вы сможете легко отследить самостоятельно, а о некоторых могут сообщить ваши посетители. Но если страниц много? К сожалению в большинстве таких случаев «битые» картинки могут висеть незамеченными достаточно долго. На своем хостинге их, в принципе, можно отследить по появлению ссылок в логе ошибок 404 (страница не найдена), а если изображения находятся на другом сервере?
Я придумал способ, который позволяет автоматизировать процесс обнаружения «битых» картинок на сайте. Он основан на том, что при недоступности какого-либо внешнего объекта возникает ошибка, которая генерирует событие onerror. Перехватив и обработав это событие, можно уведомить администратора сайта о возникшей проблеме. Обработчик состоит из трех частей: первая часть выполняется в браузере посетителя сразу после загрузки страницы и устанавливает перехватчик на все картинки на странице.
JavaScript:
// Кроссбраузерная установка перехватчика ошибок на все картинки
var obj = document.getElementsByTagName('img');
for(var i = 0;i<obj.length;i++) {
if (obj[i].addEventListener) {
obj[i].addEventListener('error', handle_error, false);
}
else {
obj[i].attachEvent('onerror', handle_error);
}
}
Вторая часть получает управление при ошибке, и также выполняется в браузере пользователя. Ее задача заключается в том, чтобы заменить битую картинку на какую-нибудь дефолтную.
JavaScript:
// Обработчик битых картинок
function handle_error(e) {
e = e ? e : window.event;
var imgElem = e.target ? e.target : e.srcElement;
imgElem.src='error_picture.php?src='+imgElem.src+'&page='+document.location.href;
}
И, наконец, третья — серверная часть, выполненная в виде PHP-скрипта. Она получает и обрабатывает битую ссылку, делает запись в лог или отправляет уведомление администратору сайта, а затем возвращает дефолтное изображение.
PHP :
<?
//--------------------------------------------------------------------
// Серверный обработчик битых ссылок
//--------------------------------------------------------------------
// Прочитать дефолтную картинку с диска
$f=@fopen('error.gif','r');
Header('Content-type: image/gif');
// Передать ее в браузер
echo fread($f,filesize('error.gif'));
fclose($f);
// Получить ссылку на страницу с битой ссылкой и саму битую ссылку
$f=fopen('error.log','a+');
$str = "Date: ".date("d.m.Y H:i:s")."\r\n";
$str .= "Picture: ".$_GET['src']."\r\n";
$str .= "URL: ".$_GET['page']."\r\n";
$str .= "------------------\r\n";
// Записать данные в лог-файл
fwrite($f,$str);
fclose($f);
?>
Как все это работает? После загрузки страницы каждой картинке добавляется обработчик события onerror. При возникновении ошибки (битая ссылка на картинку), управление передается обработчику ошибки. Он получает адрес картинки из тега img, адрес страницы, на которой произошло событие, а затем подменяет битую ссылку ссылкой на PHP-скрипт, передавая ему в качестве параметров адрес картинки и страницы. Скрипт на сервере сохраняет в лог полученную информацию об ошибке, читает файл с дефолтным изображением и отдает его в браузер вместо битой картинки. Пример конечной реализации может выглядеть так: http://www.manhunter.ru/demo/error_picture.html
h++p://www.manhunter.ru/webmaster/280_obrabotka_nedostupnih_kartinok_na_sayte.html
Оставьте первый комментарий