求助：<object>标签onclick事件无法触发，嵌入网页点击无响应

这个坑我之前踩过！你遇到的核心问题是浏览器的同源策略在限制你——当嵌入的是外部域名的页面时，浏览器会严格阻止父页面直接访问或监听子页面内部的DOM事件，不管是给object加onclick属性、用JS绑定click事件，还是用div包裹，都绕不开这个安全限制。

为什么之前的方法都无效？ #

当点击发生在跨域的object/iframe内部时，事件并不会冒泡到父页面的DOM层级里，浏览器直接拦截了事件传递，所以你只能捕获到点击object边框（外部区域）的情况，内部点击完全无法感知。

可行的解决方案分两种情况： #

1. 你能控制嵌入页面的代码（比如是自己域名下的页面）

这是最理想的情况，我们可以通过跨页面消息通信来实现：

• 在子页面中监听点击事件，然后通过postMessage把事件信息发送给父页面
• 父页面监听message事件，接收子页面发来的消息并处理

举个具体的代码例子：
子页面（嵌入的页面）代码：

// 监听子页面内部的所有点击
document.addEventListener('click', (e) => {
  // 发送消息给父页面，第二个参数建议指定父页面的域名（比如'https://your-parent-domain.com'），更安全
  window.parent.postMessage({
    type: 'child-click',
    target: e.target.tagName // 可以传递点击元素的信息，按需调整
  }, '*');
});

父页面代码：

// 监听子页面发来的消息
window.addEventListener('message', (event) => {
  // 可以先验证消息来源，防止恶意消息
  // if (event.origin !== 'https://your-child-domain.com') return;
  
  if (event.data.type === 'child-click') {
    console.log('嵌入页面内部被点击了！点击的元素是:', event.data.target);
    // 这里写你的业务逻辑
  }
});

2. 嵌入的是完全无法控制的第三方页面

这种情况没有完美的解决方案，因为同源策略是浏览器的硬安全限制，不过有几个变通思路：

• 禁用子页面的交互，只监听区域点击：给object/iframe设置pointer-events: none，这样点击会穿透到外层的包裹div上，你可以在div上监听点击。但副作用是子页面里的所有交互（比如按钮、链接）都会失效，只能知道用户点击了这个嵌入区域，无法获取具体点击位置或元素。

  #test {
    pointer-events: none;
  }
  

  然后给外层包裹的div绑定点击事件即可。
• 特殊环境下的绕过：如果是在Electron、NW.js这类桌面应用中，你可以通过配置关闭同源限制，但网页环境下绝对做不到，这是浏览器的安全底线。

内容的提问来源于stack exchange，提问作者Danny Keeley