JavaScript Error: Permission denied to access property ‘target’

“Error – Permission denied to access property ‘target'”是一个常见的错误信息，在使用JavaScript时可能会出现，特别是在试图访问一个事件对象的目标属性时。当脚本试图访问它没有权限访问的对象的某个属性或方法时，就会发生这个错误。在本教程中，我们将讨论这个错误的原因以及如何修复它。

了解错误

Error – Permission denied to access property ‘target'”通常是由于在脚本没有权限访问的情况下使用了事件对象的target属性。事件对象的目标属性指的是事件发生的元素。例如，如果一个用户点击了一个按钮，那么点击事件的目标属性就指的是按钮元素。

当脚本试图从一个对象（如窗口对象）中访问目标属性，而它没有权限访问该对象时，就会发生错误。例如，当脚本在不同的上下文中运行时，或者从不同的来源加载时，就会发生这种情况。

导致错误的原因

有几个常见的原因导致了 “错误。访问属性’目标’的权限被拒绝 “的错误 –

跨源脚本。 – 当一个脚本从与试图访问它的页面不同的来源加载时，就会出现这种错误。这是网络浏览器的一个安全功能，以防止恶意脚本访问敏感信息或在页面上执行未经授权的操作。

不正确的事件处理 – 当脚本试图在事件对象完全初始化之前访问其目标属性时，就会出现这种错误。例如，如果你试图在document.onload事件处理程序中访问目标属性，你会得到这个错误，因为当时目标属性还没有被访问。

对象不是事件对象 – 当脚本试图访问一个不是事件对象的对象的目标属性时，可能会发生这个错误。例如，如果你试图访问一个窗口对象的目标属性，你会得到这个错误，因为窗口对象不是一个事件对象。

如何修复该错误

解决 “Error: Permission denied to access property ‘target’”的错误将取决于错误的原因。

检查起源 – 如果错误是由跨源脚本引起的，你可以通过检查脚本的源头并确保它与页面的源头相同来解决这个问题。这可以用document.location.origin属性来完成。

使用正确的事件处理程序 – 如果错误是由不正确的事件处理引起的，你可以通过使用正确的事件处理程序来解决这个问题。例如，你不应该使用document.onload事件处理程序，而应该使用window.onload事件处理程序。

检查对象类型 – 如果错误是由于试图访问一个不是事件对象的目标属性造成的，你可以通过确保你试图访问该属性的对象实际上是一个事件对象来解决这个问题。

此外，作为一种替代方式，如果你使用事件委托，你可以使用event.currentTarget而不是event.target。CurrentTarget属性总是指你绑定事件监听器的元素，而target指的是触发事件的元素。使用event.currentTarget可以确保你总是能够访问正确的对象，避免出现 “Error:Permission denied to access property ‘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://www.tutorialspoint.com";
      document.body.appendChild(iframe);

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