如何在 HTML 中发生错误时执行脚本？

本文将学习如何在 HTML 中发生错误时执行脚本。

如果在加载外部文件时发生错误，则会启动 onerror 事件（例如文档或图像）。

让我们看一下以下示例，以进一步了解如何在 HTML 中发生错误时执行脚本。

使用 HTML

示例

在以下示例中，我们使用 img 将图像显示在网页上，使用 img src 属性。

<!DOCTYPE html>
<html>
<body>
   <img src="C:\Users\Lenovo\Desktop\Tutorialspoint\12.png" onerror="mytutorial()">
   <p id="varma"></p>
   <script>
      function mytutorial() {
         document.getElementById("varma").innerHTML ="Image cannot be loaded.";
      }
   </script>
</body>
</html>

执行上述脚本后，会检查 img src 并显示文本“无法加载图像”，因为已触发错误事件。

使用 addEventListener() 方法

addEventListener() 是 EventTarget 接口的方法，用于设置一个函数，每当将指定的事件传递到目标时都会调用该函数。 addEventListener() 方法通过将一个函数或实现 EventListener 的对象添加到 EventTarget 上指定事件类型的事件侦听器列表中来工作。

示例

在以下示例中，我们使用 eventlistener() 方法来显示图像源。

<!DOCTYPE html>
<html>
<body>
   <img id="tutorial" src="C:\Users\Lenovo\Desktop\Tutorialspoint\12.png">
   <p id="tutorial1"></p>
   <script>
      document.getElementById("tutorial").addEventListener("error", mytutorial2);
      function mytutorial2() {
         document.getElementById("tutorial1").innerHTML = "Image cannot be loaded.";
   }
   </script>
</body>
</html>

当脚本执行时，该方法被触发并搜索图像源。如果未找到图像源，则会发生错误事件并显示文本“无法加载图像”。

更新于： 2022-12-15

142 次查看

开启您的 职业生涯

通过完成课程获得认证

立即开始
广告