时间戳

首页 > 解决方案 > 在不同网站上的 iframe 中的路线更改时，检测外部点击无法正常工作

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

问题描述

我正在构建一个网络应用程序，它将嵌入到另一个带有 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>

对不起，我无法制作片段。

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

标签： javascriptvue.jsvue-routervuejs3

解决方案

您可以尝试 iframe 上的 onBlur 函数来检测焦点何时离开框架，也许？就像是

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

推荐阅读