在网页上实现监控功能(HTML)

Question

我有一个 HTML 网站，其中包含指向某些外部网站的链接的图片。我的任务是显示外部网站是否关闭。也就是说，如果网站可以 ping 通，我会显示一个代表该网站的徽标。如果网站已关闭，无法 ping，我会显示带有红叉的徽标。

这可以实现吗？

Answer 1

以下方法可行：

<img id="image" src="http://externalsite.com/foo.png">

const image = document.getElementById('image');
let loaded = false;

function swapImage() { image.src = '/not-available-image.png'; }

image.addEventListener('load', () => loaded = true);

setTimeout(() => {
  if (!loaded) swapImage();
  }
}, 3000);

这会在 load 事件上设置一个事件侦听器，并且在它触发时将 loaded 变量设置为 true。然后它还会设置一个三秒计时器，当它触发时，如果图像尚未加载，它会将其交换为您的不可用图像。这种方法的唯一问题是在原始图像检索失败和计时器到期之间的过渡期间，您将看到 "broken image" 图标。

Answer 2

我觉得不可能实现。

当您想 "ping" 一个网站时，您可以向它发送 ajax 请求。

如果 URL 是 public 网络 API，它就可以工作。但如果没有，你会遇到跨源问题。

在网页上实现监控功能(HTML)

Implement a monitoring function on a web-page (HTML)

html

javascript

monitoring