clickoutside在iframe中不生效最简单方案

最新推荐文章于 2025-01-05 15:54:13 发布
原创 最新推荐文章于 2025-01-05 15:54:13 发布 · 241 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端 #javascript #html

点击iframe，会触发外部window的blur事件，因此可以实现点击iframe能够关闭浮层

window.addEventListener('blur', () => {this.visible = false});
litCabbage
关注
「已解决」iframe 本地生效 但是在测试环境不生效问题
Constantiny的博客
08-12 1239
我有一个表格中一列是个详情，这个详情可被点击，点击后弹出抽屉，抽屉里是后端传给我详情字段的值对应的 url 的 iframe 展示。后端传的网址是以 http 开头，用 replace 方法把 http 换为 https，其他不变即可解决问题。问题是，在本地 localhost 下运行，ifame 运行正常，但是部署到测试环境就看不到 iframe！看起来像是 https 的问题。
精选资源
解决webview内的iframe中的事件不可用的问题
01-03
最近做Android的Webview开发，使用iframe中嵌入了很多页面，嵌入的页面却不可用，最后发现是 webView.setWebViewClient(new WebViewClient() { @Override public boolean shouldOverrideUrlLoading(WebView view...
iframe 无法触发 clickOutside
qq_44376306的博客
10-18 2757
记录在项目中遇到的一个问题，点击el-dropdown的外部没有将其正常关闭，请教了其他同事，在他提醒下找到了答案：原来跟iframe有关。在一个嵌入 iframe 的页面中，当我们点击按钮展开 Dropdown 展开后，再去点击 iframe 发现无法触发 Dropdown 的 clickOutside 事件，导致 Dropdown 无法关闭。
focus-outside::package: 一个很棒的 clickOutside 库，它解决了 iframe 无法触发 clickOutside 的问题，并且它支持分组绑定处理。A good clickOutside library, which solves the problem that iframe cannot trigger clickOutside, and it supports grouping binding processing
05-01
焦点外 | 这是什么 好的clickOutside库可以解决iframe无法触发clickOutside的问题，并且支持分组绑定处理。 原料药 功能 描述 选项 bind 将外部处理程序绑定到元素 el ， callback ， key ， className ，有关详细信息，请参见下面的Bind Params表 unbind 清除元素绑定功能 el元件节点 绑定参数 范围 类型 描述 必需的 默认 el 元素 要绑定的元素 真的 -- callback 功能 外部事件触发时的处理功能 真的 -- key 字符串/函数 将元素或函数分为一组类型。 单击同一组元素时，将不会触发外部事件，而单击同一组外部的元素将触发外部事件。 错误的 callback函数 className 细绳 绑定到元素的类名 错误的 “聚焦外” 注意 绑定元素后， focus-outside会将元素
如何解决 iframe 无法触发 clickOutside
weixin_33985679的博客
07-09 1194
前言 在公司的一次小组分享会上，组长给我们分享了一个他在项目中遇到的一个问题。在一个嵌入 iframe 的系统中，当我们点击按钮展开 Dropdown 展开后，再去点击 iframe 发现无法触发 Dropdown 的 clickOutside 事件，导致 Dropdown 无法关闭。 查看在线示例 为什么无法触发 clickOutside 目前大多数的...
关于iframe点击事件无效的解决办法
android_xiaobai1的博客
07-02 1万+
在一次项目的需求下，我偶然发现一个问题，为什么我给iframe添加点击事件无效。 经过度娘的一番解释发现，iframe是没有点击事件的，神奇! var iframe1 = document.querySelector('#iframeID') iframe1.addEventListener('click', function() { a...
跨域限制导致无法触发 iframe 中内容的 onclick 事件
Chloeeeeeeee的博客
04-29 1129
如果遇到跨域限制导致无法触发 iframe 中内容的 onclick 事件，可以考虑：1. 使用 postMessage；2. 修改响应头；3. 使用代理页面
VUE3 ClickOutSide 设置某个元素不响应
weixin_36991257的博客
05-11 1724
应用场景 以前遇到过一个需求。一个按钮触发显示/隐藏一个悬浮框，点击悬浮框其他地方可以触发clickOutSide 事件隐藏悬浮框，所以按钮应该例外。 ClickOutSide应该比较常用，下面简单贴一下clickOutSide工具类代码 import type { ComponentPublicInstance, DirectiveBinding, ObjectDirective } from 'vue'; type DocumentHandler = <T extends MouseEvent
精选资源
vue基于iframe优雅实现全新的微前端方案，继承iframe的优点，补足 iframe 的缺点，让 iframe 焕发新生
11-01
基于iframe优雅实现全新的微前端方案，继承iframe的优点，补足 iframe 的缺点，让 iframe 焕发新生。 适合人群：具备一定编程基础，工作1-3年的研发人员 能学到什么： 1、使用postMessage方法来完成基座项目和子...
解决extjs在firefox中关闭窗口再打开后iframe中js函数访问不到的问题
12-02
在Firefox中，当一个包含iframe的页面被关闭后，这个iframe的引用可能在内存中仍然存在，但是它的状态可能已经被清除。因此，当你重新打开这个页面时，尽管iframe的HTML内容可能已经加载，但之前建立的JavaScript...
微信jssdk在iframe页面失效问题的解决措施
10-22
针对这个问题，一个解决方案是：在主页面进行签名验证，然后在iframe子页面中调用父页面的jssdk接口。具体操作方法是在父页面加载完jssdk后，使用parent.前缀调用父页面中的jssdk方法。例如，如果需要在子页面使用...
iframe 事件不起作用
weixin_45932157的博客
08-12 1743
在父页面中绑定了mousemove，但是鼠标经过iframe的时候却没有触发事件，只要加上一点css就好了。
禁止点击背景而关闭bootstrap弹出框 Disable click outside of bootstrap model area to close mod...
Just Code
11-17 1711
On Options chapter, in the page you linked, you can see the backdrop option. Passing this option with value 'static' will prevent closing the modal.As @PedroVagner pointed on comments, you also can p...
vue3中通过自定义指令，实现点击空白处触发事件，点击非自身dom触发事件
技术前端，忠于热爱 @回忆哆啦没有A梦
12-16 4990
vue3中通过自定义指令，实现点击空白处触发事件，点击非自身dom触发事件。我们经常在开发过程中，会遇到这些问题： - 怎么实现点击空白处关闭指定盒子？ - 怎么实现点击空白处收起下拉框？ 即，怎么触发点击空白处事件，怎么触发 点击非自身dom而触发的事件？
如何取消ESP32 VS code 右下角弹窗通知问题！
最新发布
qq_34885669的博客
01-05 405
ESP32 VS code 右下角弹窗通知非常烦人！改为“output”
Vue3 自定义指令：ClickOutside（点击当前区域之外的位置）
热门推荐
梓沐666的博客
04-19 1万+
哈喽，大家好，我是 SuperYing。今天我们聊一个 Vue3 自定义指令 — ClickOutside，顾名思义，就是处理点击当前区域之外的位置的场景。 Vue 指令 首先，我们先来回顾一下 Vue 指令 相关的知识点。 简介 Vue 指令是带有 v- 前缀的特殊 attribute。指令 attribute 的值预期是 单个 JavaScript 表达式。指令的职责是当表达式的值改变时，将其产生的连带影响，响应式的作用于 DOM。 注册方式 1.全局注册 通过 Vue 实例对象的 directive
点击ESC键的时候可以把弹框关闭
m0_66698608的博客
10-31 279
【代码】点击ESC键的时候可以把弹框关闭。
【亲测免费】 v-click-outside 项目常见问题解决方案
gitblog_07218的博客
09-13 1055
**v-click-outside** 是一个用于 Vue.js 的开源项目，主要功能是提供一个自定义指令，用于检测用户是否点击了指定元素之外的区域。这个指令非常有用，例如在关闭对话框、菜单等场景中，当用户点击元素外部时触发相应的事件。 该项目的主要编程语言是 JavaScript，并且它是基于 Vue.js 框架开发的。 ## 新手使用注意事项及解决方案 ### 1. 安装问题 **问题...
node项目 error Insert `⏎` prettier/prettier 异常解决方法
Tekin 是深耕技术 20 年的全栈实战派专家，精通 Go/Python/Java 等多语言开发。博客专注技术原理与实战结合，深度解析 Python 高阶编程、Go 语言架构、数据库优化等硬核内容。涵盖并发编程、机器学习、云原生等前沿领域，通过真实案例拆
06-05 3266
node项目中 npm run dev 启动后 js文件报error Insert `⏎` prettier/prettier 异常，原因是因为这个出错的代码行后面少了一个空白行.。。。。
在手机版中 iframe 不居中，不生效
05-13
在移动端中，一些浏览器可能会对 `iframe` 的默认样式进行重写，导致其无法居中或无法生效。你可以尝试在 `iframe` 外部包裹一个 `div` 元素，并在该元素上设置居中样式，例如： ```html ;"> <iframe src="your-...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值