社区
JavaScript
帖子详情
如何监听跨域iframe点击事件
hou80houzhu
2012-05-09 10:10:54
如题,但我不想使用刷新代理iframe的方式来调用父页面的回调,或者使用定时器监听某变量的变化来调用。还有没有其他的办法?
PS:
webqq那个widget(天气和时钟)做的很好,widget内部为一个单独页面,确实是跨域的。每当点击iframe并拖动,发现有请求发送,但是页面不刷新(浏览器历史没有变化),但确实将点击事件通知到了外部页面,并可以拖动。不知webqq那个跨域iframe拖动是如何实现的?希望高手给予解答,谢谢。
...全文
1296
9
打赏
收藏
如何监听跨域iframe点击事件
如题,但我不想使用刷新代理iframe的方式来调用父页面的回调,或者使用定时器监听某变量的变化来调用。还有没有其他的办法? PS: webqq那个widget(天气和时钟)做的很好,widget内部为一个单独页面,确实是跨域的。每当点击iframe并拖动,发现有请求发送,但是页面不刷新(浏览器历史没有变化),但确实将点击事件通知到了外部页面,并可以拖动。不知webqq那个跨域iframe拖动是如何实现的?希望高手给予解答,谢谢。
复制链接
扫一扫
分享
转发到动态
举报
写回复
配置赞助广告
用AI写文章
9 条
回复
切换为时间正序
请发表友善的回复…
发表回复
打赏红包
hou80houzhu
2012-05-09
打赏
举报
回复
是人品问题么,怎么没人回答~
hou80houzhu
2012-05-09
打赏
举报
回复
[Quote=引用 6 楼 的回复:]
引用 5 楼 的回复:
引用 4 楼 的回复:
其实我是想问的是你为什么会认为拖动时钟的请求(应该是监测吧)的方法是由内层的iframe触发事件来做的呢,据我看到的顶层元素id是这个appWindow_11的z-index值很高,触发监测请求的事件为什么不可能绑在这个元素上呢?
如果是这样
<div id='appWindow_11'>
<iframe></iframe……
[/Quote]
iframe里面有操作,webqq天气那个插件,iframe里面的操作正常,也就是说如果通过div覆盖iframe的话,那ifram里面的操作都无法完成了~
敢不敢告诉我webqq那个是如何搞的,我看不到他是如何跨域的~
hou80houzhu
2012-05-09
打赏
举报
回复
[Quote=引用 7 楼 的回复:]
跨子域是没有问题的,只要主域相同就行了
两页面的 document.domain = 'qq.com'
另外,如果当需要操作iframe的移动时,可以这样
<div id='appWindow_11'>
<div id='mask'>一个透明遮罩</div>
<iframe></iframe>
</div>
[/Quote]
iframe里面有操作,webqq天气那个插件,iframe里面的操作正常,也就是说如果通过div覆盖iframe的话,那ifram里面的操作都无法完成了~
打字员
2012-05-09
打赏
举报
回复
跨子域是没有问题的,只要主域相同就行了
两页面的 document.domain = 'qq.com'
另外,如果当需要操作iframe的移动时,可以这样
<div id='appWindow_11'>
<div id='mask'>一个透明遮罩</div>
<iframe></iframe>
</div>
KimboQi
2012-05-09
打赏
举报
回复
[Quote=引用 5 楼 的回复:]
引用 4 楼 的回复:
其实我是想问的是你为什么会认为拖动时钟的请求(应该是监测吧)的方法是由内层的iframe触发事件来做的呢,据我看到的顶层元素id是这个appWindow_11的z-index值很高,触发监测请求的事件为什么不可能绑在这个元素上呢?
如果是这样
<div id='appWindow_11'>
<iframe></iframe>
</div>
的话……
[/Quote]
appWindow_11遮罩在iframe上面,你其实点击不到iframe因为你始终点击的是div,而将监测的请求绑定在div层上就行了,而你如果想监测iframe的链接点击事件话,那就是你说的绑定resize事件了。
hou80houzhu
2012-05-09
打赏
举报
回复
[Quote=引用 4 楼 的回复:]
其实我是想问的是你为什么会认为拖动时钟的请求(应该是监测吧)的方法是由内层的iframe触发事件来做的呢,据我看到的顶层元素id是这个appWindow_11的z-index值很高,触发监测请求的事件为什么不可能绑在这个元素上呢?
[/Quote]
如果是这样
<div id='appWindow_11'>
<iframe></iframe>
</div>
的话,那么iframe的区域在点击事件看来就好像空出来一样,没反应,也就是说iframe没有click事件。所以如果想要让这个“空”出来的区域有click响应就得跨域处理。
只是我不知webqq是咋实现的~
KimboQi
2012-05-09
打赏
举报
回复
其实我是想问的是你为什么会认为拖动时钟的请求(应该是监测吧)的方法是由内层的iframe触发事件来做的呢,据我看到的顶层元素id是这个appWindow_11的z-index值很高,触发监测请求的事件为什么不可能绑在这个元素上呢?
hou80houzhu
2012-05-09
打赏
举报
回复
好吧,我说明下:
webqq天气那个插件所在域为appx.qq.com,他是一个iframe内的一个单独页面,而主域为web.qq.com,这样就明显是跨域问题,跨域时javascript不支持iframe的click事件更不能通信,而拖动肯定要监听鼠标点击事件,这个事件只能在iframe内部获取到,而域的鸿沟导致这事传递起来很机车。
古来跨域的方式有多种如iframe(window.name,hash),img.src,jsonp等,看webqq的源码,感觉比较崩溃,能力有限如看天书般~但根据这个问题我想应该使用iframe的方式比较稳妥,但是想让同域的脚本执行还是有些技巧的,考验的是经验,一般情况下有两种方式触发,一种是修改src,一种是timer检测,两种都很蛋疼,故前来询问有什么更好的跨域方式。无果,但有幸认识到iframe的resize事件是可以在主域监听的,所以一切都变得很优雅了,但是webqq是如何实现的,小弟实不才,看不懂。
实现方式:
使用传统的iframe代理方式,只是不修改src也不timer,而使用监听resize事件,这样当要传递消息时只需要改变代理iframe的size就能够触发同域的脚本,如此便很好了。
KimboQi
2012-05-09
打赏
举报
回复
时钟跨域iframe拖动?不是那个顶层的 appWindow_11这个元素在动吗?
iframe
监听
鼠标
点击事件
iframe
监听
鼠标
点击事件
需要实现的页面逻辑是: 1. 点击父窗体中按钮,显示侧边栏; 2. 点击页面其他区域(
iframe
)可以隐藏侧边栏先构造页面文档结构: 这是需要隐藏的侧边栏--%> <button><%--点击按
为
iframe
添加onclick事件,
iframe
跨域
如果页面上有
iframe
时,鼠标点击在
iframe
内时,包含
iframe
的document是不响应任何事件的。所以需要给
iframe
绑定类似的事件,当
iframe
指向的是第三方的内容时,还要考虑
跨域
的问题,因此通过操作
iframe
的document是行...
使用jQuery进行
跨域
iframe
接口调用的详细步骤
现在,我们可以在浏览器中打开主页面.html,并点击"调用接口"按钮来测试
跨域
接口调用是否成功。当按钮被点击时,主页面会向嵌入的
iframe
页面发送一条消息,嵌入的
iframe
页面会接收到消息并执行相应的操作。在主页面....
给
iframe
添加
点击事件
存在
跨域
问题,所以需要用到document.activeElement 1.0处理方法: export const
Iframe
OnClick = { resolution: 200,
iframe
s: [], interval: null,
Iframe
: function () { this.element = arguments...
vue页面中嵌入
iframe
外源地址页面
监听
iframe
中事件
1.需求 vue中需要嵌入
iframe
地址是第三方的 当
iframe
h中页面点击的时候.vue需要监控到这个事件将本页面关闭.代码中 js 发送和接收方法 //vue组件中是个弹框 <template> <el-dialog title="编辑" :...
JavaScript
87,910
社区成员
224,616
社区内容
发帖
与我相关
我的任务
JavaScript
Web 开发 JavaScript
复制链接
扫一扫
分享
社区描述
Web 开发 JavaScript
社区管理员
加入社区
获取链接或二维码
近7日
近30日
至今
加载中
查看更多榜单
社区公告
暂无公告
试试用AI创作助手写篇文章吧
+ 用AI写文章