Как узнать, что браузер ограничивает показ сторонних изображений?

Question

Для веб-разработчика есть ли какой-нибудь способ узнать, что браузер посетителя (и я смотрю на вас, Firefox и Edge) не отображает изображения, исходящие с других веб-сайтов?

Предпочтительно , это была бы некоторая переменная $_SERVER, доступная в PHP -скрипте или свойстве Javascript.

В моем случае у меня есть игра HTML5 с аватарами игроков, иногда происходящими с других сайтов (URL-адреса HTTPS только!).

Если бы я знал, что сторонний контент загрузка ограничена посетителем, я бы по крайней мере отобразил бы общее изображение игрока c вместо "испорченного изображения" значок, отображаемый Firefox:

print_r($_SERVER);
print_r($_ENV);

не показал ничего подходящего, то же самое для Javascript ...

Answer 1

Я не проверил его полностью, но интерфейс HTMLImageElement предоставляет обработчик ошибок :

Если при попытке загрузить или отобразить изображение возникает ошибка, и обработчик события onerror был настроен для обработки события ошибки, для которого будет вызван этот обработчик события.

Вот быстрое и грязное подтверждение концепции:

var images = document.getElementsByTagName("img");
var i;
for (i = 0; i < images.length; i++) {
  images[i].addEventListener("error", brokenImageHandler);
}

function brokenImageHandler(event) {
  var img = event.target;
  var replacement = "https://via.placeholder.com/" + img.getAttribute("width") + "x" + img.getAttribute("height");
  img.setAttribute("src", replacement);
}

<img src="" width="300" height="100" alt="Blank URI">
<img src="https://example.com/broken.png" width="200" height="50" alt="Broken link">

Answer 2

Согласитесь с Альваро Гонсалесом, попробуйте использовать событие onError . Событие onerror вызывается, если при загрузке внешнего файла возникает ошибка.

См. Следующий код:

Приведенный выше код хорошо работает в IE11, Microsoft Edge и * 1025. * браузер, если предыдущий параметр изображения не существует, он будет отображать изображение по умолчанию (Image / Image1.jpg).

Результат, как показано ниже:

Перед установкой события onError:

После использования события onError: