本文示例使用的

  • 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);
Logo

前往低代码交流专区

更多推荐