FrameDataTrans教程

博客园 乳鸽菌 20220729

核心原理是使用postMessage发送数据,window.addEventListener("message",fun)监听。
插件地址

index.htm

//    <iframe id="fr" src="child.html"></iframe> var iFrameDom =document.getElementById("fr");  //创建实例 var frameDataTrans = window.createFrameDataTrans(           window,           iFrameDom.contentWindow         );  //两种pos方式 frameDataTrans.post("getText", {text:"111"}, function (data) {    console.log(data);//{text:"222"}  });  var data = await frameDataTrans.postAsync("getText",{text:"111"}); console.log(data);//{text:"222"}   

child.html

const frameDataTrans = window.createFrameDataTrans(window, window.parent);  //两种接收pos的方式  frameDataTrans.bindPost("getText", () => {      //使用的时候允许不使用return      return {text:"222"};  });  frameDataTrans.bindPostCallback("getText", (reqData, resFun) => {        //resFun允许不符合数据       resFun({text:"222"});  });  

上面例子演示的是index向child发送请求，反过来也是可以的