错误: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.com";
      document.body.appendChild(iframe);

      var target = iframe.contentWindow.document.querySelector("p"); // Refused to display 'https://tutorialspoint.com/' 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+ 次浏览

启动您的 职业生涯

通过完成课程获得认证

开始
广告