珠海企业模板建站,石家庄工程造价信息网官网,商业网站开发教程,我想做代理文章目录 需求分析父传子子传父 需求 一个vue项目中通过iframe嵌套另外一个vue项目#xff0c;如何让这两个项目之间进行通信 分析
在Vue项目中通过iframe嵌套另外一个Vue项目时#xff0c;可以通过postMessage方法实现这两个项目之间的通信。postMessage是HTML5新增加的API… 文章目录 需求分析父传子子传父 需求 一个vue项目中通过iframe嵌套另外一个vue项目如何让这两个项目之间进行通信 分析
在Vue项目中通过iframe嵌套另外一个Vue项目时可以通过postMessage方法实现这两个项目之间的通信。postMessage是HTML5新增加的API它允许在不同的window或iframe之间发送消息。
父传子
A项目中父组件中调用B项目并发送 msg
templateiframe idmodle_iframe refIframe :srcurl frameborder0 /
/template
script
export default {name: Index,data () {return {viewer: null,url: ,projectId: this.$store.state.project.projectId,structId: this.$store.state.struct.structId,token: getToken()}},mounted () {const iframe document.getElementById(modle_iframe)const port process.env.NODE_ENV development ? 9002 : 41003const baseUrl ${window.location.protocol}//${window.location.hostname}:${port}/#/homethis.url ${baseUrl}?projectId${this.projectId}structId${this.structId}token${this.token}sign9const obj {sign: safeDaba,value: 9}const msg JSON.stringify(obj)iframe.contentWindow.postMessage(msg, *)// this.$nextTick(() {// this.init()// })},methods: {}
}
/script
style scoped
#modle_iframe {width: 100%;height: 600px;
}
/styleB项目中子组件中接收B项目发送的 msg
window.addEventListener(message, function (e) {e.stopPropagation();//防止异常try {let data JSON.parse(e.data); //转化为jsonif (data.sign waterAndRain) {if (data.value 1) {}} else {}} catch (err) {}});如果上述代码看不太明白那么
下面是一个示例代码演示了如何在父窗口和子窗口之间使用postMessage方法进行通信
在父窗口中
// 获取iframe元素
const iframe document.querySelector(#myIframe)// 监听message事件
window.addEventListener(message, (event) {// 判断消息来源是否为iframe的地址if (event.source iframe.contentWindow) {// 处理接收到的消息console.log(收到来自子窗口的消息, event.data)}
})// 发送消息给iframe
iframe.contentWindow.postMessage(Hello from parent, *)
在子窗口中
// 监听message事件
window.addEventListener(message, (event) {// 判断消息来源是否为父窗口的地址if (event.source window.parent) {// 处理接收到的消息console.log(收到来自父窗口的消息, event.data)// 发送消息给父窗口window.parent.postMessage(Hello from child, *)}
})在上述代码中我们首先获取了用于嵌套另一个Vue项目的iframe元素。然后在父窗口中监听了message事件当接收到来自iframe的消息时就会将消息打印输出到控制台中。
接着在父窗口中使用postMessage方法向iframe发送了一条消息。
在子窗口中我们也监听了message事件并判断消息来源是否为父窗口的地址。当接收到来自父窗口的消息时就会将消息打印输出到控制台中并使用postMessage方法向父窗口发送了一条消息。
需要注意的是当使用postMessage方法发送消息时第二个参数指定的是消息的目标窗口的origin这里我们使用通配符*表示允许发送消息到任何域名但在实际应用中建议设置具体的域名。
子传父
首先在被调用者子组件中使用postMessage方法将消息传递给父窗口
子页面
// 在被调用者子组件中
// 向父窗口发送消息
window.parent.postMessage(Hello from child, *)然后在调用者父组件中通过监听message事件接收子组件传递的消息
mounted() {window.addEventListener(message, this.handleMessage)},methods: {handleMessage(event) {// 处理接收到的消息console.log(收到来自子组件的消息, event.data)},}或
// 在调用者父组件中
// 监听message事件
window.addEventListener(message, (event) {// 判断消息来源是否为被调用者子组件的地址if (event.source document.querySelector(iframe).contentWindow) {// 处理接收到的消息console.log(收到来自子组件的消息, event.data)}
})在上述代码中被调用者子组件通过window.parent.postMessage方法将消息发送给父窗口。注意这里的window.parent表示父窗口的全局对象。
在调用者父组件中我们使用window.addEventListener方法监听message事件并通过判断消息来源是否为被调用者子组件的地址来确定是否处理该消息。
通过这种方式被调用者子组件可以将消息传递给调用者父组件实现跨域通信。
需要注意的是由于涉及到跨域通信需要确保两个项目的域名不同否则会受到浏览器的同源策略限制。同时也需要确保被嵌套的项目正确设置了允许跨域访问的响应头。
