iframe 请求父级页面方法跨越 解决方法postMesasge

iframe请求腹肌页面报错

Blocked a frame with origin "http://192.168.4.192" from accessing a cross-origin frame.

解决方法：

具体的使用方式和原理的文章有很多，而就应用场景而言，iframe间通信最完美的办法莫过于postMessage了。

postMesasge是html5标准的方法，ie10+浏览器都支持，ie8/9部分支持。以下是部分实例：

主页面添加监听方法：此处只能监听 message

event.origin --发送者的源
event.source --发送者的window对象
event.data --数据

window.addEventListener("message", function (event) {
      if (event.data.taskCode) {
        const code = event.data.taskCode;
        if (!detectionRoute("/taskOverDetail")) return;
        History.push("/taskOverDetail", {
          data: { taskCode: code }
        });
      }
    });

iframe调用主页面方法：

postMessage接收两个参数，第一个表示信息，可以传递字符串或者对象，我用的对象。refresh 是目标页面监听事件的key,对象内可以传递多个key;第二个参数表示目标源，*表示所有，但不安全

//跨域给父级页面传参数
    $(".listenHreFn").click(function() {
        var taskCode = $(this).attr('taskCode');
        window.parent.postMessage({taskCode},'*');
    });

新开页面时也能用这个方式向父页面传递事件（ie8/9不支持）

window.opener.postMessage({refresh:'some message'},'*')