点击隐藏div存在iframe无效

最新推荐文章于 2024-07-08 15:34:48 发布
最新推荐文章于 2024-07-08 15:34:48 发布
阅读量2.7k 收藏 1
点赞数
CC 4.0 BY-SA版权
分类专栏： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/zy_crazy_code/article/details/52054275
本文介绍了一种解决在点击包含iframe的div时无法正常隐藏的方案。通过添加透明覆盖层并利用jQuery绑定click事件，使得即使点击iframe也能触发div隐藏。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

点击隐藏div的时候有iframe 点击无法隐藏，因为iframe onclick根本无效 

     解决办法：
 <div   class="choice-list" style=" display: block;" id="choice-list" >
   <div style="position :absolute;left:0px;top:0px;width:100%; height: 100%;filter :alpha(opacity=1);opacity:0" ></div>
   <iframe id= "idapDiv" width ="100%"  frameborder="no" scrolling="no" name= "idapDiv"  allowtransparency="true" ></iframe>
 </div>
里面加一个div设置style="position :absolute;left:0px;top:0px;width:100%; height: 100%;filter:alpha(opacity=1);opacity:0" >

     $( ".choice-list" ).bind("click", function(){
          $( ".system-subnav" ).hide();
     }) 

Vue中对iframe实现keep alive无刷新的方法
saowen163的博客
05-24 8999
前言 最近一个需求，需要在 Vue 项目中加入 含有iframe 的页面，同时在路由切换的过程中，要求iframe的内容 不会被刷新 。一开始使用了Vue自带的keep- alive发现没有用，于是自己研究了一下解决方案。。。。。。 Vue的keep-alive原理 要实现对保持iframe页的状态。我们先搞清楚为什么Vue的keep-alive不能凑效。keep-alive原理是把组件里的节点信息保留在了 VNode （在内存里），在需要渲染时候从Vnode渲染到真实DOM上。iframe页里的内容并不属
iframe 渲染请求到的 html (邮件预览), 避免样式污染 + 打印 iframe 邮件详情 + iframe 预览邮件时固定水平滚动条在视口底部
最新发布
汤一飞
07-25 1595
iframe 预览邮件 + 打印邮件 + 模拟滚动条
js如何设置在iframe框架中指定div不显示
10-26
在iframe框架中指定div不显示，有多种实现方法，接下来与大家分享下使用js的具体实现，感兴趣的朋友可以参考下
iframe页面向vue父页面传值，vue页面向iframe页面传值
qq_34799366的博客
04-16 2385
1.iframe页面向vue父页面传值 vue代码 <template> <div> <iframe id="iframe"></iframe> </div> </template> <script> export default { data(){ return { iframeDa...
奇怪的safari：0像素的iframe不能被display:none的div圈住隐藏
LENEL的砖篮
09-29 4994
0x0的iframe在ie下没有任何显示，而FireFox浏览器上却会显示一个黑点。很多web2.0应用在FireFox下都有那一个个的黑点。我尝试用来隐藏黑点。在firefox下效果很好，但在safari下出现了大的问题：原有iframe的功能失效了，无法访问到被隐藏的iframe的src属性。终于隐隐明白为什么黑点会始终存在。但是这是个不该发生的问题，display是一个CSS样式而已，影
iframe点击事件无效?给iframe添加点击事件?
qq_44988714的博客
06-12 3376
iframe点击事件无效?给iframe添加点击事件? 进来了 证明我们在填坑的路上还是很相似的嘛!接下来直接上代码! 通过操作iframe的document是行不通的，不过还有有document.activeElement可供我们使用! // c+v大法可直接使用 <body> <iframe id="iFrame" class="hotm" src="https://h.eqxiu.com/s/zAd1U265" frameborder="0"></ifram
如何解决 iframe 无法触发 clickOutside
weixin_33985679的博客
07-09 1162
前言 在公司的一次小组分享会上，组长给我们分享了一个他在项目中遇到的一个问题。在一个嵌入 iframe 的系统中，当我们点击按钮展开 Dropdown 展开后，再去点击 iframe 发现无法触发 Dropdown 的 clickOutside 事件，导致 Dropdown 无法关闭。 查看在线示例 为什么无法触发 clickOutside 目前大多数的...
Vue项目中iframe无刷新切换页面的实现
Vue的内置组件`keep-alive`通常用于缓存组件状态，但对iframe无效，因为iframe加载的内容是独立的页面，不在Vue组件的控制范围内。 Vue的`keep-alive`原理在于保存组件的VNode状态，当再次激活组件时，可以从VNode...
Vue中iframe无刷新实现keep-alive的策略
在寻找解决方案时，作者指出尝试保存iframe节点并重新渲染的做法无效，因为每次渲染iframe都会创建新的网页窗口，导致页面状态丢失。因此，作者提出了一种不同的思路，即不在路由切换时依赖Vue的正常路由处理，而是...
javascript+iframe 实现无刷新载入整页的代码
10-29
这种做法的确能够提高用户体验，避免页面刷新的同时，也隐藏了实际载入的页面源代码，增加了安全性。但同时也需要注意到使用`eval()`函数可能会引入跨站脚本攻击（XSS）的风险，因此必须谨慎处理载入的数据。 总结...
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 鼠标点击iframe后事件无响应
weixin_44588893的博客
07-08 2094
页面中嵌入 iframe 标签,当我们给页面添加了事件之后,鼠标点击到 ifarme 上,事件会失效。
给iframe添加点击事件
m0_53667674的博客
08-21 6823
解决iframe标签所处的盒子点击事件失效问题 给每个iframe标签设置样式，目的是时消除iframe标签里面的事件 #iframe1,#iframe2, #iframe3, #iframe4 { pointer-events: none; } 再给包裹iframe标签的盒子设置点击事件 HTML: <div class="box"> <div class="box1" style="background-color: rgba(0, 0, 0, 0);position:rela
载入的iframe页面会挡住父级页面一切冒泡事件，怎么破?
高先生的猫
07-02 2753
最近遇到个坑，页面引入了一个iframe，结果页面上所有的点击事件都失效了。 解决办法是手动绑定iframe里面事件，在事件里面触发当前窗口事件 // 点击了不触发 document.body.addEventListener('click', () => {console.log(43434343)}) // 在iframe里面手动触发 $('#iframe').contentWindow.document.body.addEventListener('click', () => {
巧用 tabindex 属性解决 iframe 环境下鼠标点击元素之外的监听事件
wudandong的博客
11-21 459
所以我们就在右键菜单视图上设置一个 tabindex 属性，在打开菜单的时候，调用元素的 focus 方法，使元素处于焦点状态，当点击其他区域的时候，会触发元素的失焦事件，此时调用关闭菜单的方法。之前的处理方案是，打开右键菜单时在 body 上注册一个监听事件，addEventListener('click', closeMenu)。场景如下：用 js 模拟了一个右键菜单，在鼠标点击到右键菜单之外的区域时，关闭菜单。当点击到 iframe 区域时，不会触发绑定在 body 上的点击事件。
在有iframe嵌套得html中实现点击某个div之外得空白处实现div隐藏，效果没有实现
weixin_41445581的博客
05-21 379
侧边栏页面展示二级页面，点击空白处隐藏二级菜单失效，原因是点击iframe中得内容得时候，没法触发方法 所以这时候需要有两个方法，第一个在主页面写一个隐藏得方法，然后在子页面使用window.parent.父页面得方法。 ...
关于iframe点击事件无效的解决办法
热门推荐
android_xiaobai1的博客
07-02 1万+
在一次项目的需求下，我偶然发现一个问题，为什么我给iframe添加点击事件无效。 经过度娘的一番解释发现，iframe是没有点击事件的，神奇! var iframe1 = document.querySelector('#iframeID') iframe1.addEventListener('click', function() { a...
点击div外区域隐藏div操作(嵌套iframe页面)
阿毛的博客
01-10 5194
一、正常页面 $(document).click(function(){ $(dom).hide();//要隐藏的div }); 二、嵌套iframe页面 （我实现的是点击子页面隐藏父页面的元素） 除了写正常页面的操作之外，也需要在子页面里面写第二个操作 $(document).click(function(){//父页面 $(dom).hide();/...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值