iframe子元素触发父级点击事件

最新推荐文章于 2024-01-11 15:58:56 发布
原创 最新推荐文章于 2024-01-11 15:58:56 发布 · 3.1k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了一种在子元素中通过jQuery触发父窗口中动态生成元素点击事件的方法，具体实现为在子元素的点击事件中找到父窗口指定ID的子菜单项并触发点击。

$(".breadcrumb_inner").on('click', 'li>a',function () {

// $('#menuSideBar .submenu>li[mid=172]>a', window.parent.document).click()

parent.$(window.parent.document).find('#menuSideBar .submenu>li[mid=172]>a').click();// 获取的父级的元素 触发点击事件；

 

});

点击事件是子元素的；  而且 触发的点击事件是动态生成的

 

iframe内嵌网页通知父页面事件
码农键盘上的梦
11-11 950
在父页面中，通过监听message事件，可以获取来自iframe内嵌网页的消息。子页面可以通过JavaScript获取对父页面的引用，并调用父页面的函数或对象来通知事件的发生。确保iframe元素的src属性指向子页面的URL，并设置合适的宽度和高度以适应子页面的内容。首先，在iframe内嵌的网页中，需要定义一个事件，当需要通知父页面时触发该事件。合作通信机制：父页面和子页面必须协调使用一种通信机制来实现跨页面通信。只有当父页面和子页面具有相同的域名、协议和端口号时，才可实现跨页面通信。
iframe子父窗口的相互调用
weixin_44037153的博客
05-26 4676
iframe在复合文档中经常用到，利用jquery操作iframe可以大幅提高效率，这里收集一些基本操作 doc方法：父窗口操作iframe：window.frames[“iframeSon”].document iframe操作父窗口: window.parent.document jquery方法:在父窗口中操作 选中iframe中的所有输入框： $(window.frames[“iframeSon”].document).find(“:text”); 在iframe中操作 选中父窗口中的所有输入框：$
在iframe里怎么触发父框架的点击事件
sunshinezx8023的博客
06-28 1020
父级:index.html页面 <input id="no" type="text"/> 给id="no"元素 绑定自定义hello事件 $("#no").bind('hello',function(){ console.log("hello"); }); 在子页面:show.html触发该事件 parent.$("#no").trigger('hello'); //触发父页面元素的hello方法 ...
iframe子页面获取父页面的点击事件
github_37759996的博客
05-16 1933
iframe子页面获取父页面的mouseenter事件,需要load事件指定iframe元素加载完成时运行的函数 父页面Html代码： <head> <meta charset="UTF-8"> <title>parent page</title> <script type="text/javascript" s...
iframe如何触发父元素事件以及父页面控制iframe子页面元素
gzhang1018的博客
01-19 999
最近在开发登入窗口中运用到iframe，其中遇到一些小问题拿出来分享一下。 问题：用jquery的$(‘parent.document’).find(’#id’)来取父框架的元素，取出来的DOM元素也是正确的，在控制台打印出来了，但调用click()方法就是触发不了绑定的函数 1.父页面有一个打开注册事件： $(’#regis’).click(function(){ $(’.container’).append(regis); $(’.modal-backdrop’).click(function(){ $
Jquery iframe 子级页面触发父级页面事件
GCH的博客
03-09 2215
父级页面注册事件： var btns = []; var a1 =$("<a id='prev_but'>").on("click", function(){ }); // 上一页 btns.push(a1) var a2 =$("<a id='next_but'>").on("click", function(){ }); // 下一页 btns.pu
Iframe 和父页面交互+Iframe 的onclick()事件
逸少
12-22 1万+
假设我们做一个下拉框的功能，当鼠标在页面上的其它位置点击一下时，这个下拉框就隐藏掉了，通常在没有iframe时，这个功能很容易做，给document绑定onmousedown或onclick即可，如果页面上有iframe时，鼠标点击在iframe内时，包含iframe的document是不响应任何事件的，所以需要给iframe绑定类似的事件，当iframe指向的是第三方的内容时，还在考虑跨域的问题
Jquery 动态添加元素并添加点击事件实现过程解析
10-16
事件冒泡是指从目标元素开始，事件会向上冒泡到父级元素，依次触发父级元素上绑定的事件处理器。事件捕获则是从根元素开始，事件会向下传递到目标元素，同样依次触发沿途元素的事件处理器。默认情况下，浏览器使用的...
iframe子向父传值实例.rar
06-03
本示例“iframe子向父传值实例”旨在提供一个解决方案，帮助开发者应对跨域问题，从而实现iframe内部页面与外部页面的数据通信。 首先，我们来理解`iframe`的基本概念。`iframe`（Inline Frame）是HTML中的一个元素...
在iframe中拦截点击事件，点击后执行父级的跳转C页面方法，同时可以上下滑动， 父子域名不同源
06-21
### 在跨域 iframe 中拦截点击事件并触发父级页面跳转，同时保留滚动功能 在不同源的 iframe 中实现点击事件拦截并触发父级页面跳转，同时保留滚动功能，可以通过以下方法实现。这种方法结合了透明覆盖层和 `post...
利用JQuery操作iframe父页面、子页面的元素和方法汇总
10-19
主要给大家介绍了关于利用JQuery操作iframe父页面、子页面的元素和方法的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。
父窗口点击一个图片（或图标），用iframe链接到其他地址，并且在父级窗口全屏展示
张大晴的博客
05-16 1232
需求描述：在a.html页面，嵌入一个iframe. 在a.html中点击一个图标，让iframe全屏展示，并且iframe展示其他页面的内容知识点：注意：当窗口全屏，keyup,keydown类似事件是监听不到esc按键的，这是浏览器一个安全机制。如果不是全屏模式还是可以监听到的。全屏的操作：借鉴文档：https://blog.youkuaiyun.com/k358971707/article/detail...
js 调用父窗口函数-iframe父窗口和子窗口相互的调用方
Magister_Feng的专栏
08-17 2202
iframe 父窗口和子窗口相互的调用方法集锦 一、父窗口调用iframe子窗口方法 　　1、HTML语法： 　　2、父窗口调用子窗 口：myFrame.window.functionName(); 　　3、子窗品调用父窗 口：parent.functio
多种方案教你实现iframe嵌套页面相互传参(父子通信)
热门推荐
tangdou369098655的博客
06-30 3万+
在工作中，我们会遇到一些需求，使用iframe嵌套另一个页面，这个页面大部分情况下不会部署在父页面相同的域名下，但是又需要父子页面进行数据交互，那么我们该怎么处理呢？接收postMessage方的怎么用呢？postMessage方法有三个参数。欢迎大家指出文章需要改正之处~iframe页面添加代码。iframe页面添加代码。iframe页面添加代码。iframe页面添加代码。一起来看一下效果吧~
解决iframe重定向让父级页面跳转
林先生学习博客
08-09 3308
在做项目过程中遇到了一个bug 前端页面使用的iframe 当我们重启tomcat时候，session失效 而项目做了过滤器 没有登录的不允许访问会跳到登录界面 但是在iframe 点击父页面的a标签 只会在子页面跳转到登录界面。 解决办法就是 js判断登录界面是否是最外层页面 不是的话父页面进行跳转 ...
JavaScript中给 iframe 中的元素添加点击事件
分享前端工程化、动效魔法与性能之舞！
05-28 4370
最近在开发一个浏览器插件，需要抓取掌中云平台的数据，由于该平台的页面结构是采用iframe嵌套的方式加载的，所以在添加事件的时候遇到了一点小麻烦，现特此将解决方法记录如下，以供大家复制粘贴。 function setEvent(className) { setTimeout(function(){ for(var i = 0; i<window.frames.length; i++) { window.frames[i].document.oncl......
项目中使用iframe引入html 解决路由错乱问题以及父子组件传值调用方法
夜空孤狼啸的博客
01-11 1246
#微前端【代码】项目中使用firame引入html 解决路由错乱问题。在项目中使用firame引入html，引入的html中有路由跳转，当点击html页面中的路由跳转时，浏览器history会记录次路由，当在引入iframe返回上一级的页面中使用 router.go(-1)就会返回iframe中距离的路由，这样不符合逻辑解决方案如下： 主要是由于浏览器history记录了iframe嵌入页面的路由信息，这个信息不论是iframe内的地址跳转，还是iframe src的切换，都会被记录，下面给出解决方案
iframe中的子窗体调用父窗体中的方法
07-09 2821
iFrame语法：  iframe 标签 -- 代表HTML内联框架iframe 标签是成对出现的,以 开始, 结束 属性 name -- 定义了内容页名称,此名称在框架页内链接时使用到 src -- 定义了内容页URL frameborder -- 定义了内容页的边框,取值为(1|0),缺省值为1 1 -- 在每个页面之间都显示边框 0 --
vue跨iframe从里向外获取父级元素方法
最新发布
10-25
当点击子页面的按钮时，就会触发该方法，进而尝试获取父级元素并输出其文本内容。 需要注意的是，由于浏览器的同源策略，若父页面和子页面的协议、域名或者端口不同，这种跨域访问会受到限制。在跨域的情况下，可...
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值