如何在 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 次檢視

開啟您的 職業生涯

透過完成課程獲得認證

立即開始
廣告