当 HTML 发生错误时执行脚本?

htmlweb developmentfront end technology更新于 2024/8/11 21:00:17

在本文中，我们将学习如何在 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>

执行上述脚本时，系统会检查图片源，并显示"无法加载图片"文本，因为触发了错误事件。

使用 addEventListener() 方法

EventTarget 接口的addEventListener() 方法设置了一个函数，每当指定事件传递到目标时，该函数都会被调用。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>

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