Question

我用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>

然后，我想取消屏蔽网址，但前提是页面中不存在图片（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-单击取消屏蔽的网址后，网址就会被屏蔽，如上例所示。

问：如何用onError取消隐藏网址？

Answer 1

如注释中所述，onError在onLoad之前执行。解决方法是，您可以检查load事件上是否有任何丢失的图像。如果缺少图像，请不要打{{1}}。

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, '.');
  }
}

onLoad与onError：如何使两者一起工作？

1 个答案: