您的位置:首页技术文章
文章详情页

javascript - 父页面监听iframe中的事件问题

浏览:52日期:2022-12-24 08:42:12

问题描述

始终无法监听到,是什么原因?

parent.html

<body> <iframe src='https://www.haobala.com/wenda/son.html' frameborder='0'></iframe><script src='https://www.haobala.com/wenda/jquery.js'></script><script> $(function(){$($(’#iframe’)[0].contentWindow).on(’dosomething’, function(){ alert(’接收到到iframe的事件’);}); });</script></body>

son.html

<body><h1>son</h1> <button id='button'>trigger</button><script src='https://www.haobala.com/wenda/jquery.js'></script><script> $(function(){$(’#button’).on(’click’, function(){ $(window).trigger(’dosomething’);}); });</script></body>

谢谢!

Dont

刚才搜索时发现的,也不错,兼容性可以MessengerJShttps://github.com/biqing/Mes...跨文档通信解决方案

问题解答

回答1:

son.html

$(function(){$(’#button’).on(’click’, function(){ window.parent.$(window).trigger(’dosomething’);}); });

事件是在父页面的jquery里定义的,要触发需要交由父页面的jquery来负责触发。

jquery源码太久没看了,找半天,没找到对应的内容来说明。

回答2:

页面间通信可以使用 postMessage。

或者只在同一个页面绑定和处理事件。

$(’#iframe’).contents().find(’#button’).on('click', function(){ $(window).trigger(’dosomething’);});回答3:

无法监听到的原因是因为父页面通过on方法执行事件绑定的时候,将事件回调函数注册在了父页面的jquery对象中。而子页面在执行trigger方法的时候只会寻找子页面的jquery对象中注册的事件回调,所以在事件触发后执行不了父页面注册的事件回调函数,因为在子页面的jquery对象里找不到。

回答4:

两个jq, 两个环境, 确定没问题么?

------ 上面是原答案, 下面是我被举报以后的吐槽 -------

我想请问举报我的那个, 两个jq环境, 这是不是你无法触发事件的原因? 我这个回答有什么问题? 你举报的理由是啥?

标签: JavaScript
相关文章: