onLoad и onError: как заставить оба работать вместе? - PullRequest
Новая
       33

onLoad и onError: как заставить оба работать вместе?

0 голосов
/ 03 января 2019

Я маскирую все URL в теле с помощью javascript, например 

    function mask() {
      var a = document.getElementsByTagName('a');
      for (var i = 0; i < a.length; i++) {
        a[i].attributes.href.value = a[i].attributes.href.value.replace(/\./g, '"|"');
      }
    }
<body onLoad="mask()"> 
<a href="https://example.com">link</a>
</body>

Затем я хочу снять маску с URL, но только в том случае, если на странице есть несуществующее изображение (onError), например 

function mask() {
  var a = document.getElementsByTagName('a');
  for (var i = 0; i < a.length; i++) {
    a[i].attributes.href.value = a[i].attributes.href.value.replace(/\./g, '"|"');
  }
}

function unmask() {
  var a = document.getElementsByTagName('a');
  for (var i = 0; i < a.length; i++) {
    a[i].attributes.href.value = a[i].attributes.href.value.replace(/"\|"/g, '.');
  }
}
<body onLoad="mask()">

<a href="https://example.com">link</a>
<br /><br />
<button onClick="unmask()">unmask</button>
<br /><br />
<img src="non-existing-image.gif" onError="unmask()"/>
 
</body>

Это не работает.Но если я использую для демаскирования что-то вроде кнопки и onClick, демаскировка работает, как и ожидалось: onLoad - URL-адреса маскируются, после клика URL-адреса не маскируются, как в примере выше.

Q :Как мне разоблачить URL с onError?

1 Ответ

0 голосов
/ 03 января 2019

Как уже упоминалось в комментариях, onError выполняется до onLoad.В качестве обходного пути вы можете проверить, отсутствуют ли какие-либо изображения в событии load.Если изображения отсутствуют, вообще не звоните mask(). 

function maskIfNoMissingImage() {
  var images = document.getElementsByTagName('img');
  var isMissingImage = false;

  for (var i = 0; i < images.length; i++) {
    if (!images[i].complete || typeof images[i].naturalWidth == "undefined" || images[i].naturalWidth == 0) {
      isMissingImage = true;
      break;
    }
  }

  if (!isMissingImage) {
    mask();
  }
}


function mask() {
  var a = document.getElementsByTagName('a');
  for (var i = 0; i < a.length; i++) {
    a[i].attributes.href.value = a[i].attributes.href.value.replace(/\./g, '"|"');
  }
}

function unmask() {
  var a = document.getElementsByTagName('a');
  for (var i = 0; i < a.length; i++) {
    a[i].attributes.href.value = a[i].attributes.href.value.replace(/"\|"/g, '.');
  }
}
<body onLoad="maskIfNoMissingImage()">

  <a href="https://example.com">link</a>
  <br /><br />
  <button onClick="unmask()">unmask</button>
  <br /><br />
  <img src="non-existing-image.gif" />

</body>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...