LOGO OA教程 ERP教程 模切知识交流 PMS教程 CRM教程 开发文档 其他文档  
 
网站管理员

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

admin
2023年5月25日 14:52 本文热度 343

这几天在项目中遇到一个难点,就是需要异步加载一个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()方法,里面的参数细节请参考相关文档。


该文章在 2023/5/25 14:54:54 编辑过
关键字查询
相关文章
正在查询...
点晴ERP是一款针对中小制造业的专业生产管理软件系统,系统成熟度和易用性得到了国内大量中小企业的青睐。
点晴PMS码头管理系统主要针对港口码头集装箱与散货日常运作、调度、堆场、车队、财务费用、相关报表等业务管理,结合码头的业务特点,围绕调度、堆场作业而开发的。集技术的先进性、管理的有效性于一体,是物流码头及其他港口类企业的高效ERP管理信息系统。
点晴WMS仓储管理系统提供了货物产品管理,销售管理,采购管理,仓储管理,仓库管理,保质期管理,货位管理,库位管理,生产管理,WMS管理系统,标签打印,条形码,二维码管理,批号管理软件。
点晴免费OA是一款软件和通用服务都免费,不限功能、不限时间、不限用户的免费OA协同办公管理系统。
Copyright 2010-2024 ClickSun All Rights Reserved