錯誤:JavaScript 中訪問屬性“target”被拒絕


“錯誤 - 拒絕訪問屬性 'target'” 是在使用 JavaScript 時可能出現的常見錯誤訊息,尤其是在嘗試訪問事件物件的 target 屬性時。當指令碼嘗試訪問其無權訪問的物件的屬性或方法時,就會發生此錯誤。在本教程中,我們將討論此錯誤的原因以及如何解決它。

理解錯誤

“錯誤 - 拒絕訪問屬性 'target'” 通常是由在指令碼無權訪問它的上下文中使用事件物件的 target 屬性引起的。事件物件的 target 屬性指的是發生事件的元素。例如,如果使用者單擊一個按鈕,則單擊事件的 target 屬性將引用該按鈕元素。

當指令碼嘗試從物件(例如視窗物件)訪問 target 屬性時,而它無權訪問該屬性時,就會發生此錯誤。例如,當指令碼在不同的上下文中執行或從不同的來源載入時,就會發生這種情況。

錯誤原因

“錯誤:拒絕訪問屬性 'target'” 錯誤的幾個常見原因:

跨源指令碼 - 當指令碼的載入來源與嘗試訪問它的頁面的來源不同時,可能會發生此錯誤。這是 Web 瀏覽器中的一項安全功能,用於防止惡意指令碼訪問敏感資訊或在頁面上執行未經授權的操作。

事件處理不正確 - 當指令碼嘗試在事件物件完全初始化之前訪問其 target 屬性時,可能會發生此錯誤。例如,如果您嘗試在 document.onload 事件處理程式中訪問 target 屬性,則會收到此錯誤,因為此時 target 屬性尚不可訪問。

物件不是事件物件 - 當指令碼嘗試訪問的不是事件物件的 target 屬性時,可能會發生此錯誤。例如,如果您嘗試訪問視窗物件的 target 屬性,則會收到此錯誤,因為視窗物件不是事件物件。

如何修復錯誤?

“錯誤:拒絕訪問屬性 'target'” 錯誤的解決方案取決於錯誤的原因。以下是一些常見的解決方法:

檢查來源 - 如果錯誤是由跨源指令碼引起的,您可以透過檢查指令碼的來源並確保它與頁面的來源相同來修復它。可以使用 document.location.origin 屬性來完成此操作。

使用正確的事件處理程式 - 如果錯誤是由事件處理不正確引起的,您可以透過使用正確的事件處理程式來修復它。例如,您應該使用 window.onload 事件處理程式,而不是使用 document.onload 事件處理程式。

檢查物件型別 - 如果錯誤是由於嘗試訪問非事件物件的 target 屬性引起的,您可以透過確保要訪問其屬性的物件實際上是事件物件來修復它。

此外,如果您使用事件委託,則可以使用 event.currentTarget 代替 event.target 作為替代方法。 CurrentTarget 屬性始終引用您已繫結事件偵聽器的元素,而 target 屬性引用觸發事件的元素。使用 event.currentTarget 可以確保您始終能夠訪問正確的物件並避免“錯誤:拒絕訪問屬性 'target'”錯誤。

檢查訪問許可權 - 如果錯誤是由瀏覽器中拒絕的許可權引起的,您可以檢查瀏覽器的設定並確保頁面具有訪問該屬性的正確許可權。

使用 try catch 塊 - 為了處理可能發生錯誤的情況,您可以在程式碼中使用 try-catch 塊。這將幫助您以更合適的方式捕獲和處理錯誤,並避免指令碼崩潰。

try{
   // code that throws error
}catch(e){
   console.log(e);
}

示例

此錯誤可能以不同的方式發生,但最常見的方式是嘗試跨不同域訪問視窗物件的屬性或方法,這稱為“同源策略”,其中網頁上的指令碼只有在其與頁面的來源相同的情況下才能訪問視窗物件的屬性和方法。實施此限制是為了防止惡意指令碼訪問敏感資訊或在頁面上執行未經授權的操作。

這是一個示例:

<html>
<head>
   <title>Accessing properties across different domains</title>
</head>
<body>
   <div id="print"></div>
   <script>
      // This script runs on example1.com
      var iframe = document.createElement("iframe");
      iframe.src = "https://tutorialspoint.tw";
      document.body.appendChild(iframe);

      var target = iframe.contentWindow.document.querySelector("p"); // Refused to display 'https://tutorialspoint.tw/' in a frame because it set 'X-Frame-Options' to 'sameorigin'.
      document.getElementById("print").innerHTML = JSON.stringify(target); //null
   </script>
</body>
</html>

結論

“錯誤:拒絕訪問屬性 'target'” 錯誤是在使用 JavaScript 時可能出現的常見問題。瞭解錯誤的原因並使用適當的技術來修復它可以幫助您避免此錯誤並確保指令碼順利執行。

始終注意指令碼的來源、指令碼的上下文以及您嘗試訪問其屬性的物件型別,並檢查訪問許可權。透過這樣做,您可以確保您的指令碼具有訪問所需屬性的必要許可權,並避免“錯誤:拒絕訪問屬性 'target'”錯誤。

此外,捕獲錯誤並以不會中斷指令碼的方式處理錯誤始終是一個好習慣。這就是本教程的關鍵要點,如何優雅地處理錯誤。

更新於:2023年1月19日

3K+ 次瀏覽

啟動您的 職業生涯

透過完成課程獲得認證

開始
廣告
© . All rights reserved.