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发送请求，反过来也是可以的
