大家好,本篇文章为大家解答以上问题,相信很多人对iframe事件都不是特别的了解,因此呢,今天就来为大家分享下关于iframe事件以及给iframe添加点击事件的问题知识,还望可以帮助大家,解决大家的一些困惑,下面一起来看看吧!
本文目录一览
- 1、iframe怎样实现触发父窗口元素事件
- 2、iframe监听鼠标点击事件
iframe怎样实现触发父窗口元素事件
这次给大家带来iframe怎样实现触发父窗口元素事件,iframe实现触发父窗口元素事件的注意事项有哪些,下面就是实战案例,一起来看一下。
例如父窗口定义了一个事件。
top:
$(dom1).bind('topEvent', function(){});那么iframe里面的元素怎样触发父窗口dom1的事件呢?这样吗?
$(dom1, parent.
document
).trigger('topEvent');看似正确,实则误导人。
因为父窗口的jquery对象与iframe里面的jquery对象实际为两个对象(function),iframe里面的jquery并不会触发另一个jquery对象定义的事件。除非你在iframe这样定义了:
iframe:
self.$ = parent.$;所以解决的方法很简单:
parent.$(dom1,parent.doucment).trigger('topEvent');调用父jquery执行该事件就行了。
话说iframe应该不必再引进jquery文件的,与父窗口共用一个jquery就行了,这样很环保。
相信看了本文案例你已经掌握了方法,更多精彩请关注Gxl网其它相关文章!
推荐阅读:
Tab选项卡滚动导航切换实现(附代码)
jQuery最简洁实现tab选项切换
iframe监听鼠标点击事件
需要实现的页面逻辑是:
1. 点击父窗体中按钮,显示侧边栏;
2. 点击页面其他区域(iframe)可以隐藏侧边栏
先构造页面文档结构:
因为相对于父窗体,iframe中加载的是一个相对独立的document文档,如果直接在父窗体中使用iframe.onlick监听该区域的点击事件,则不会返回任何结果。
首先我们需要获取iframe所属的document对象:
随后对这个document对象注册事件处理程序,监听响应鼠标点击事件:
但是这样做还不能满足要求,因为iframe中内容会单独加载,如果我们在它的DOM解析完成之前就去获取document对象并绑定事件监听程序,将不会有任何效果。
所以我们需要先监听iframe页面加载完成事件,在处理程序中获取文档对象:
本文内容由互联网用户自发贡献,该文观点仅代表作者本人。如发现本站有涉嫌抄袭侵权/违法违规的内容,请发送邮件至 449@qq.com 举报,一经查实,本站将立刻删除。本文链接:https://www.hnhgjc.com/n/589728.html