React 实现 iframe内dom绑定事件修改

Published on with 0 views and 0 comments

故事

刚刚搞定了iframe宽高自适应问题,又来新问题了,由于iframe内嵌的是另一套开源系统的网页。哦豁这个时候,iframe中有一些点击事件,我需要对那些事件进行自定义实现。

思考方案

1:将iframe中的JS方法进行重写或者覆盖
失败!由于不想改源码,以后也不一定用得到,得不偿失。
2:让iframe中的标签上的事件调用父页面自己实现的方法
最终实现

说干就干

 <iframe id = 'iframe'
         src={'xxxx'}
         frameborder='0'
         onLoad={() => {
           let doc = document.getElementById("iframe").contentWindow.document.getElementsByTagName("body")[0];
           let imgs = doc.children[0];
           imgs.setAttribute("onclick","javascript:window.parent.downLoadFile()")
           imgs.alt = "下载文件";
           imgs.title = "下载文件";
		   //实现文件下载功能
           window.downLoadFile = function(){
             let src = 'xxx';
             let form = document.createElement('form');
             form.action = src;
             document.getElementsByTagName('body')[0].appendChild(form);
             form.submit();
           }
        }}

 />

核心点

1:通过document.getElementById("iframe").contentWindow.document获取到iframe中的子元素
2:获取需要的dom
3:通过setAttribute 覆盖子元素原有的事件(必须通过该玩意进行覆盖,直接赋值会失效)
4:写父页面方法时,必须是全局方法,如果不是需要用window.来进行。eg:window.downLoadFile
5:完成,点击正常调用


标题:React 实现 iframe内dom绑定事件修改
作者:sirwsl
地址:https://www.wslhome.top/articles/2022/04/10/1649592563967.html