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