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

故事

刚刚搞定了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：完成，点击正常调用