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前端架构路由跳转才是最好的解决办法，需要在项目前期就规划好。

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

页面嵌套iframe怎么调用父页面的方法，子页面回调父页面函数方法
父页面要有此函数 //子页面回调此函数 IndexCallback = function() {console.log('我是父页面的方法') } 子页面回调父页面的方法 window.parent. ...
iframe子页面调用父页面javascript函数的方法
1.iframe子页面调用父页面js函数子页面调用父页面函数只需要写上window.parent就可以了.比如调用a()函数,就写成: window.parent.a(); 2.iframe父页面 ...
js/iframe 子页面调用父页面方法与父页面调用子页方法
博客转载于 https://blog.csdn.net/weixin_44512123/article/details/99698419 在做项目中都会存有主页面子页面.子页面嵌套中主页面中,主页面有 ...
vue使用iframe 子页面调用父页面的方法
// 子页面调用父页面方法 var id = parent.vm.getId();
vue 子页面调用父页面的参数_js父页面调用子页面数据时，子页面通过父页面传过来的参数回调父页面具体方法_html/css_WEB-ITnose...
今天写代码时发现同一页面多个地方需要调用同一个子页面,如果多个方法调用时,同一子页面回调父页面方法则会出问题,所以查了下资料,让这个功能通用化,根据具体方法回调具体父页面方法,顺便总结一下,希望以后可 ...
使用JS实现子页面调用父页面的函数
在JS中,子页面调用父页面的方法常使用为 1.window.parent.xxx(); 2.window.opener.xxx();对比这两个方法,需要思维转换一下,这两个parent和opener都 ...
js代码父页面调用子页面中的js方法，子页面调用父页面中的js方法
文中代码亲测可用,转载以示尊重!!!  <script type="text/javascript"> //调用子页面的方法 ...
iframe父页面获取iframe子页面的元素与 iframe子页面获取父页面元素
一.在iframe子页面获取父页面元素代码如下:$('#objld', parent.document); 二.在父页面获取iframe子页面的元素代码如下:$("#objid", ...
vue 子页面调用父页面常用方式
vue 子页面调用父页面常用方式父组件 <template><div><child @fatherMethod="fatherMethodOther" ...
vue 子页面调用父页面方法、回写父页面数据
方法一推荐使用:this.$parent // 调用父类的方法 this.$parent.getlist() // 给父页面对象赋值 this.$parent.proForm = response. ...

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

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

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

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

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

最新文章

热门文章

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

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

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

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

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

最新文章

热门文章

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

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