Blocked a frame with origin XXX from accessing a cross-origin 跨域问题解决方案

本文示例使用的

• html
• vue
• ckeditor4

场景说明

项目是一个比较老的项目，需要使用ckeditor4来进行步骤填写，商议后使用jsp内iframe一个vue的html页面进行编写，但是在部署的环境下发生了iframe跨域问题，本文提供了一种解决思路。

解决方案

父级向iframe传值：

使用url取值方案，网上也有很多子集监听数值的方案，但是实际过程中往往第一次在子页面初始化时，是监听不到数据的，故采用url拼接传值方案，关键代码如下

//父级代码
<iframe id="aaa"  name="aaa" ></iframe>
var url =  "/ceshi.html?id="+111;
aaa.location=url;

//子页面接受代码

function getQueryString(name) {
    const reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
    const r = window.location.search.substr(1).match(reg);
    if (r != null) return decodeURI(r[2]);
    return null;
}

const tempId = getQueryString('id');

iframe向父级传递信息：

我的场景是iframe是一个模态框，里面有关闭模态框的按钮，若点击按钮，需要传递给父级信息让模态框进行隐藏操作。

//iframe内传值代码
 const message = {"close": true};
 window.parent.postMessage(message, '*');

//父级监听代码

window.addEventListener('message', function (e) {
    //let target = e.target;
    let data = e.data;
    // console.log(data);
    if (e.data.close)
    {
        //此处调用业务代码
    }
}, false);