html5引入的message的API可以更方便、有效、安全的解决:

  1. 页面与嵌套的iframe消息传递

  2. 多窗口之间消息传递

  3. 跨域数据传递等问题

下面简单介绍一下postMessage的使用流程。

iframe 中使用:

postMessage两个参数,第一个传递的信息(如果是对象,最好JSON.stringify下),第二个targetOrigin(指定消息传递的地方,如果是*就是匹配所以的源)

var postMessage = 'info';
top.postMessage({hash: postMessage}, '*'); // 这里的TOP是获取的顶层,即有多层嵌套iframe的时候使用; top 即是window.top; 如果是直接的父级,就是window.parent

父页面中使用:

window.addEventListener('message', function (event) {
        const data = event.data.hash;
        self.src = src + data;
        const path = '/monitor/index' + data;
        self.$router.push({path: path})
}, false);

小渝人儿
1.1k 声望849 粉丝

前端工程师