在不同网站上的 iframe 中的路线更改时，检测外部点击无法正常工作

Posted 2023-02-22

【中文标题】在不同网站上的 iframe 中的路线更改时，检测外部点击无法正常工作

【英文标题】：Detect click outside doesn't work properly on route change in a iframe on a different website

【发布时间】：2021-09-16 21:45:19

【问题描述】：

我正在构建一个网络应用程序，它将嵌入到另一个带有 iframe（同源）的网页中。它使用 vue-router 进行路由更改。我想检测外部点击，以便用户可以通过在外部点击来关闭应用程序。

我有这个代码（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>

很抱歉，我无法进行 sn-p。

上面的代码在主页上运行良好。 问题是路由改变后，即使用户点击“内部”应用程序也会关闭。

【问题讨论】：

“我想检测外部点击，以便用户可以通过点击外部来关闭应用程序。” - 你不能，这是设计使然。否则，任何 iframe 中的任何内容都可能跨帧边界泄露机密用户信息。唯一的例外是同源 iframe，但你没有说你的 iframe 内容是否总是同源。

@Dai 它通常可以正常工作。但是当路线改变时，它不会。 iframe 来源将相同。我的错。

您能在 JSFiddle、JSBin 等网站上重现该问题吗？

我试过了，但我做不到，因为 iFrame 在另一个网站上。但我会尝试再次添加一个sn-p。

我无法复制 iframe 网络应用程序。 :(

【参考方案1】：

您可以尝试 iframe 上的 onBlur 函数来检测焦点何时离开框架，也许？类似的东西

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