旧库见文章：https://www.cnblogs.com/wuhairui/p/14595893.html
新版库主要做了下多个iframe和父页面交互的优化。主要使用构造函数的方式将多个iframe的交互使用多个对象进行区分，这样多个交互就可以互相独立了。
并可子页面主动调用传值给父页面。
新版代码：/** * iframeId iframe的id * parentName 父窗口名，一般不改 * childName 子窗口名 多个iframe时需要使用 * postMessage 父窗口调用 需要子页面加载完成后才能执行到 * returnData 子窗口主动回应 * callback 父窗口调用后子窗口判断 */ (function (w) { function HerryPostMessage(iframeId = 'iframe') { this.iframeId = iframeId; this.parentName = '父窗口'; this.childName = '子窗口'; //跨域对象 this.messageObj = {}; /** * 监听父页面发送的数据 */ w.addEventListener( "message", async (event) => { const { data } = event; if (data && typeof data === "object" && data.name === this.parentName) { if (this.callback) { this.callback(data) } } }, false ); /** * 监听子页面返回的数据 */ w.addEventListener( "message", (event) => { const { data } = event; if (data && typeof data === "object" && data.name === this.childName) { if(this.messageObj[data.action]) { this.messageObj[data.action](data); } } }, false ); } //父页面 /** * 发送给子页面数据 */ HerryPostMessage.prototype.postMessage = function(data, fn = null) { const iframe = document.getElementById(this.iframeId) iframe.contentWindow.postMessage( { name: this.parentName, //父页面名字 ...data, }, "*" ); this.messageObj[data.action] = fn; }; //子页面 /** * 返回数据给父页面 参1=当前action 参2=返回的数据 */ HerryPostMessage.prototype.returnData = function(action, data) { top.postMessage( { name: this.childName, //子页面名字 action, data, }, "*" ); }; //抛出 w.HerryPostMessage = HerryPostMessage; })(window);