问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

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

头像
热饭班长
    3.7k20241349

    始终无法监听到，是什么原因？

    parent.html

    <body>
    <iframe id="iframe" src="son.html" frameborder="0"></iframe>

<script src="./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="./jquery.js"></script>
<script>
    $(function(){
        $('#button').on('click', function(){
            $(window).trigger('dosomething');
        });
    });
</script>
</body>

    谢谢！

    Dont

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

    csshtmlhtml5javascript
    阅读 18.8k
    4 个回答
    得票最新
    头像
    Dont
      7k163552
      ✓ 已被采纳

      son.html

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

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

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

      头像
      justjavac
        47.8k744111

        页面间通信可以使用 postMessage。

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

        $('#iframe').contents().find('#button').on("click", function(){
    $(window).trigger('dosomething');
});
        头像
        tianjian
          373125266

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

          撰写回答
          你尚未登录，登录后可以
          • 和开发者交流问题的细节
          • 关注并接收问题和回答的更新提醒
          • 参与内容的编辑和改进，让解决方法与时俱进
          推荐问题