当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 关于父窗口获取跨域iframe子窗口中的元素

关于父窗口获取跨域iframe子窗口中的元素

2019年01月08日  | 移动技术网IT编程  | 我要评论

　　这几天在项目中遇到,一个难点, 就是需要异步加载一个pdf插件, 同时又需要获取这个插件中的点击事件来生成用户的下载记录.

刚开始也是想了很多方法,网上搜的

格式1：$("#iframe的id").contents().find("#iframe中的控件id").click();
 
格式2：$("#iframe中的控件id",document.frames("frame的name").document).click();

发现在跨域环境下并没有用, 看到有些人说这个无解, 需要走后台, 我当时也是凉凉感觉. 

　　后来自己也是想了办法,在插件页面中给按钮绑定事件,然后通过给插件带参数时在url中加上几个参数,一起提交.刚开始我也是做得风生水起

结果,后来发现,腰带的参数太多了,而插件又是以iframe引入, 很是麻烦..结果无意中找到了html5有一个页面通讯方法,  一实验果然有效...现在做个记录,以备不时之需

 

子页面iframe中的代码:

<script type="text/javascript">
        $("#secondarydownload").click(function(){
            var fun="click";
            window.parent.postmessage(fun,'*');
        })
  </script>

那个fun参数没有实际意义,我只是为了加个小教验,当然也可以传入自己想传的参数.  父页面代码:

 window.addeventlistener('message',function(e){
        console.log(e);
            var fun=e.data;
            if(fun=="click"){
                alert("aaa");    
                };
            }
        },false);

这样, 在我们点击子页面的下载按钮时,会给父页面发一个消息,而父页面的事件监听器会接收到从而触发相应的事件.

当然,我也是刚了解这个postmessage()方法,里面的参数细节,请参考相关文档.

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网