电商网站设计的原则,wordpress 魔,网站建设宣传视频教程,wordpress4.9下载使用 postMessage API 来实现跨窗口#xff08;跨域#xff09;的消息传递。postMessage 允许你安全地发送消息到其他窗口#xff0c;包括嵌套的 iframe#xff0c;而不需要担心同源策略的问题。 发送消息#xff08;父应用#xff09;
1. 父应用#xff1a;发送消息给…使用 postMessage API 来实现跨窗口跨域的消息传递。postMessage 允许你安全地发送消息到其他窗口包括嵌套的 iframe而不需要担心同源策略的问题。 发送消息父应用
1. 父应用发送消息给子应用
父应用可以通过 postMessage 将消息发送给子应用。需要注意的是发送消息时需要指定目标窗口和目标窗口的来源即目标 iframe 的 origin以确保安全性。 iframe.contentWindow.postMessage(message, targetOrigin) 使用 postMessage 向子应用发送消息。message 是要发送的数据可以是任何 JavaScript 对象。targetOrigin 是目标窗口的源例如http://child-app.com它确保消息只发送到具有这个源的窗口。 2、接收消息子应用
子应用通过监听 message 事件来接收父应用发送的消息。收到消息后子应用可以根据消息中的 type 字段来执行不同的操作。
示例父应用与子应用通信
1. 父应用发送消息给子应用
父应用通过 postMessage 向 iframe 中的子应用发送一个包含 type 的消息。我们还可以通过 targetOrigin 来确保消息只发送到指定的子应用。
!-- 父应用 --
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleParent App/title
/head
bodyh1Parent Application/h1!-- iframe 中嵌套子应用 --iframe idchildIframe srchttp://child-app.com width600 height400/iframebutton onclicksendMessageToChild()发送消息到子应用/buttonscript// 发送消息到子应用function sendMessageToChild() {const iframe document.getElementById(childIframe);const message {type: CLEAR_INPUT, // 消息类型data: { message: 请清空输入框 }};// 使用 postMessage 发送消息到子应用iframe.contentWindow.postMessage(message, http://child-app.com); // 子应用的 origin}/script
/body
/html2. 子应用接收父应用发送的消息
子应用会监听 message 事件接收到消息后可以处理它。通常可以根据 message.type 来决定如何处理消息。
!-- 子应用 (iframe 内容) --
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleChild App/title
/head
bodyh1Child Application/h1input typetext idinputField placeholder请输入内容...script// 监听父应用发送的消息window.addEventListener(message, function(event) {// 验证消息的来源if (event.origin ! http://parent-app.com) {return; // 如果消息来源不正确则忽略}const message event.data;console.log(Received message from parent:, message);// 根据消息的 type 执行不同操作if (message.type CLEAR_INPUT) {document.getElementById(inputField).value ; // 清空输入框}});/script
/body
/html如何在vue本地项目进行iframe测试通讯
1、新建一个iframe.vue页面为父页面
// 父应用
templatediv classact-formiframe :srcsrc idchildIframe width600 height400/iframeel-button clicksendMessage向iframe发送信息/el-button/div
/templatescriptexport default {data () {return {src: ,}},created() {// 当前我本地运行的端口为 localhost:8080 需要根据实际情况调动this.src http:localhost:8080/home?id18 },methods: {sendMessage () {const iframe document.getElementById(childIframe);const message {type: CLEAR_INPUT, // 消息类型data: { message: 请清空输入框 }};// 使用 postMessage 发送消息到子应用iframe.contentWindow.postMessage(message, this.src); // 子应用的origin},},}
}
/script
2、子应用 !-- 子应用 (iframe 内容) --
templatediv // 内容区域/div
/templatescriptexport default {data () {return {},created() {// 在外部vue的window上添加postMessage的监听并且绑定处理函数handleMessagewindow.addEventListener(message, this.handleMessage)},methods: {handleMessage (event) {// 根据上面制定的结构来解析iframe内部发回来的数据// 验证消息的来源if (event.origin ! http://parent-app.com) {return; // 如果消息来源不正确则忽略}const message event.data;console.log(Received message from parent:, message);// 根据消息的 type 执行不同操作if (message.type CLEAR_INPUT) {// 在这里执行你需要的逻辑}});}}beforeDestroy(){ // 页面关闭移除监听window.removeEventListener(message, this.handleMessage);}
/script
