layui.open uses postMessage parent-child page to pass values based on jq+layui and vue

The project environment is a parent page composed of jq+layui and a child page written by vue

Requirements: 1. Pass the interface data to the child page while opening the child page from the parent page.

2. Render data when the subpage is opened and close the current subpage after its operation is completed and submitted.

ps: Using parent.xxx, layer.getChildFrame('body', index); etc. under the iframe tag of the open subpage will cause cross-domain problems. Blocked a frame with origin "null" from accessing a cross-origin frame.

father to son

Because the framework of the parent page uses jq+layui, layer.open is used when opening the child page, and document.getElementById('Optimize_iframe').contentWindow.postMessage(res,"*") is used in its success callback. And be sure to add iframe.onload to avoid deviation between sending data and receiving data. code show as below:

Parent page:

 let url = '<iframe src="../productOptimize/productOptimize.html" id="Optimize_iframe" width="100%" height="100%" frameborder="0"></iframe>'
            $('#cancel').click(function () {
              //在全局中var optimizeProduct 方便后续的子页面返回数据关闭
              optimizeProduct = layer.open({
                type: 1,
                area: ['100%', '100%'],
                resize: false,
                title:'智能优化',
                content: url,//这种方式方便在iframe标签中加入id
                success: function (layero, index) {
                  var iframe = document.getElementById('Optimize_iframe')
                  //一定要有onload，等待加载结束
                  iframe.onload = function() {
                    //res为接口返回数据
                    document.getElementById('Optimize_iframe').contentWindow.postMessage(res,'*')
                  }
                },
              })
            })

ps If type: 2, content: is used as a file in the project, the id of the iframe tag opened by default has a default value, which can be found in the developer tool

Vue-based subpages can receive the value passed from the parent page in mounted

Subpage receives:

    mounted () {
      this.$nextTick(()=>{
      window.addEventListener('message', e => {
              console.log(e);
        })
      })
    },

child's father

The scenario is that after the child page completes the operation, click the submit button, the interface returns success, and execute the parent page layer.close() method to close the child page.

Subpage:

js.xxxx((res)=>{//接口数据
          res = JSON.parse(res)
          console.log(res);
          if(res.success){
            window.parent.postMessage(
            {
              data: {
                code: "success",
                test: "我是子页面数据",
              },
            },
            "*"
          );
          }else{
            this.$message.error(res.error)
          }
     },paramsdata)

The parent page receives:

window.addEventListener('message', e => {
  // e.data为子页面发送的数据
  layer.close(optimizeProduct);
  console.log(e.data)
})

Unresolved: while using

    var body = layer.getChildFrame('body', index);
    var iframeWin = window[layero.find('iframe')[0]['name']]; //得到iframe页的窗口对象，执行iframe页的方法：iframeWin.method();
    console.log(body.html()) //得到iframe页的body内容
    body.find('input').val('Hi，我是从父页来的')

And the cross-domain problems that occur when subpages use parent.xxxx

layui.open uses postMessage parent-child page to pass values based on jq+layui and vue

Guess you like