layui.open 使用postMessage父子页面传值 基于jq+layui和vue

项目环境是由jq+layui组成的父页面和vue写的子页面

要求：1.在从父页面打开子页面的同时将接口数据传递给子页面。

2.在子页面打开时渲染数据并在其操作完成提交后关闭当前子页面。

ps：在open 子页面的iframe标签下使用parent.xxx,layer.getChildFrame('body', index);等会导致跨域问题。Blocked a frame with origin "null" from accessing a cross-origin frame.

---

 

 父传子

因为父页面的框架就是使用jq+layui，所以在实现打开子页面时用到了layer.open，在其success回调中使用document.getElementById('Optimize_iframe').contentWindow.postMessage(res,"*")，且一定要加入iframe.onload 避免发送数据和接收数据出现偏差。代码如下：

 父页面：

 let url = '<iframe src="../productOptimize/productOptimize.html" id="Optimize_iframe" width="100%" height="100%" frameborder="0"></iframe>'
            $('#cancel').click(function () {
              //在全局中var optimizeProduct 方便后续的子页面返回数据关闭