解决使用iframe产生跨域问题

╰+攻爆jí腚メ 2022-12-17 01:20 163阅读 0赞

#### 在项目中有时候需要嵌套不同项目的代码，可能是使用不同框架构建的或域名不同，这里就需要使用iframe进行嵌套，但是使用iframe违反了浏览器的安全策略，会造成通信跨域的问题 ####

Blocked a frame with origin "https:/*******com" from accessing a cross-origin frame.

##### 解决方法是采用html5的`postMessage`来解决上述问题 #####

用法

// message: 表示要发送的数据
    // targetOrigin: 表示接受源的限制，不做限制是*,如果限制接受源：'https://www.test.com',则只能在该接受源下才能获取message
    otherWindow.postMessage(message, targetOrigin, [transfer]);

参数详解可参考[MDN][]

子页面向父页面传值

window.parent.postMessage(data, '*')

父页面监听

window.addEventListener('message', function(e){ 
    		
    	})

父页面向子页面传值

// iframeModal是iframe的id
    window.frames.iframeModal.contentWindow.postMessage({ type: 'close'}, '*')
    	or
    document.getElementById('iframe').contentWindow.postMessage(data,'*')

子页面监听

window.addEventListener('message',function(e) { 
    	
    )

另外还有父页面直接调用子页面方法，这个需要将子页面的方法挂载到window上面

window.childTest = function(){ 
    	...
    }

父页面调用该方法

window.frames.iframeModal.contentWindow.childTest()
    	or
    document.getElementById('iframe').contentWindow,childTest()

[MDN]: https://developer.mozilla.org/zh-CN/docs/Web/API/Window/postMessage

发表评论取消回复

表情：

评论列表（有 0 条评论，163人围观）

还没有评论，来说两句吧...

相关阅读

相关利用 iframe解决ajax的跨域问题

利用 iframe解决ajax的跨域问题参考文章： [（1）利用 iframe解决ajax的跨域问题][1_ iframe_ajax] （2）https://www.c

约定不等于承诺〃/ 2023年02月20日 12:29/ 0 赞/ 24 阅读

相关 iframe解决跨域

在父页面中写入iframe标签，其中src值为需要跨域访问的页面地址`<iframe ref="iframe" src="http://xxx/index.html" name

雨点打透心脏的1/2处/ 2023年01月23日 05:55/ 0 赞/ 11 阅读

相关解决iframe跨iframe传值跨域问题

最近在项目中遇到过一种情况，在iframe里面再次嵌套了iframe，第一个iframe里面的是别的项目，第二个iframe里面的是自己的项目，然后点击第二个iframe里面

女爷i/ 2022年12月17日 04:23/ 0 赞/ 165 阅读

相关解决使用iframe产生跨域问题

在项目中有时候需要嵌套不同项目的代码，可能是使用不同框架构建的或域名不同，这里就需要使用iframe进行嵌套，但是使用iframe违反了浏览器的安全策略，会造成通信跨域的问题

╰+攻爆jí腚メ/ 2022年12月17日 01:20/ 0 赞/ 164 阅读

相关 iframe跨域访问问题

最近给一个系统进行系统集成，配置了一个单点，把两个系统集成起来，以A系统为主系统，然后把B系统的菜单加到A系统中，这样就像是一个系统一样，访问起来也简单。但出了一个问题，就是i

向右看齐/ 2022年08月26日 15:26/ 0 赞/ 349 阅读

相关跨域问题（iframe）记录

> an ancestor violates the following Content Security Policy directive: “frame-ancestors

喜欢ヅ旅行/ 2022年05月27日 02:30/ 0 赞/ 471 阅读

相关 iframe跨域

按情境分 1、不跨域时 2、主域相同、子域不同时 3、主域不同 1、不跨域时访问iframe： oIframe.contentWindow 可以直

男娘i/ 2022年05月18日 06:38/ 0 赞/ 285 阅读

相关使用 postMessage 解决 iframe 跨域数据传输

关于 postMessage 相关描述请参考： [简述html 中的 postMessage][html _ postMessage] <div id="main

比眉伴天荒/ 2022年03月18日 05:56/ 0 赞/ 299 阅读

相关跨域问题的产生及解决

跨域问题的产生及解决开发过程中，或多或少都碰见过这样的情况，本地写了个ajax请求想从某某域下获取数据，代码如下： $.ajax({

﹏ヽ暗。殇╰゛Y/ 2022年01月28日 15:57/ 0 赞/ 403 阅读

相关 iframe跨域解决办法

按情境分 1、不跨域时 2、主域相同、子域不同时 3、主域不同不跨域时访问`iframe`： `contentWindow` 访问父级：`paren

心已赠人/ 2021年07月04日 13:05/ 0 赞/ 584 阅读