在另一个网站的iframe中，检测单击外部没有正确地工作在路由更改上

Question

我正在建立一个网页应用程序，将嵌入到另一个网页与iframe(相同来源)。它使用vue路由器进行路由更改。我想检测到点击外部，这样用户可以通过点击外部关闭应用程序。

我有以下代码(main.js)：

/* Simple click outside detector for vue3 */
const clickOutside = {
  beforeMount: (el, binding) => {
    el.clickOutsideEvent = event => {
      //Check if the click was outside the el and his children
      if (!(el == event.target || el.contains(event.target))) {
        // and if it did, call method provided in attribute value
        binding.value();
      }
    };
    document.addEventListener("click", el.clickOutsideEvent);
  },
  unmounted: el => {
        document.removeEventListener("click", el.clickOutsideEvent);
      }
};

作为指令的用法(App.vue)：

<div id="aimy-home" v-click-outside="handleCloseClick">
    <!-- CONTENT -->

    <!-- ROUTER CONTENT -->
      <router-view />
< /div>

很抱歉，我做不到一个片段。

上面的代码在主页上工作得很好。的问题是，在路由改变后，即使用户单击“内部”应用程序，应用程序也会关闭。

Answer 1

您可以尝试在iframe上使用onBlur函数来检测焦点何时离开帧，可能吗？有点像

<iframe 
onBlur={()=>{console.log("iframe no longer focussed")}}
> 
[your content] 
<iframe />