需求：
將react項目內嵌到一個vue項目中，並且react項目中的請求需要攜帶vue項目中的cookie
實現：
使用iframe，用vue項目中在iframe的loaded事件中用postMessage傳cookie，react項目中監聽message事件
此處在實踐中發現：
在react項目的app.js中，在componentDidMount鈎子中監聽message事件，獲取到的都只是來自react項目本身的message，無法獲取到來自vue項目中的message，最后采用了在組件外監聽message
還需要注意的一個問題是：
在iframe嵌入的項目中監聽message事件，獲取到的message可能來自很多不同的origin，需要准確判斷message來自哪里，需要根據origin做個條件篩選即可
代碼：
vue項目中：
<template>
<div>
<iframe id="template-iframe" ref="iframe" :src="src" @load="loaded" ></iframe>
</div>
</template>
<script>
export default {
data () {
return {
iframeWin: {}
}
},
computed: {
src () {
if (process.env.BASE_SYSTEM === 'devops_dev') {
return 'http://0.0.0.0:8888/alerts_confirm'
}
return 'https://alert.ainnovation.com/alerts_confirm'
}
},
methods: {
loaded () {
const cookie = document.cookie
this.iframeWin.postMessage(cookie, this.src)
}
},
mounted () {
this.iframeWin = this.$refs.iframe.contentWindow
}
}
</script>
react項目中：
function receiveMessage(event) {
// console.log(event, event.data, '我接收到了')
if (typeof event.data === 'string') {
localStorage.setItem('cookie', event.data)
}
}
window.addEventListener('message', receiveMessage, false)