HTML iframe标签下 子页面调用父页面js 容易产生的跨域调用问题 Uncaught DOMException

在一些非前端项目中，经常出现HTML和JSP页面中经常出现 Iframe页面嵌套格式的结构，有些场景需要子页面调用父页面的js方法，如在tab子页面获取父页面方法。

 

iframe页面和父页面在同一域下：不会产生跨域调用js错误

1.1子页面获取父页面元素:

$('#userId', parent.document);

1.2父页面获取子页面元素:

$("#userId", document.iframes('iframe').document) ;

2.1父页面调用子页面方法：

iframe.window.childMethod();

2.2子页面调用父页面方法：
parent.window.parentMethod();
 

iframe页面和父页面在不同域下：会产跨域调用js错误

//iframe页面

window.parent.postMessage('{"name":"方案管理","url":"/manage/..."}','*');

//父页面

window.addEventListener('message',function(event){
    var obj = JSON.parse(event.data);
    Consolo.log(obj );
});

 

个人认为会出现这样的错误和系统架构有很大关系，若采用统一网关，nginx反向代理，或者纯VUE前端架构路由跳转才是最好的解决办法，需要在项目前期就规划好。