vue 打开一个iframe_vue项目中使用iframe

需求：

将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项目中：

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

}

}

react项目中：

function receiveMessage(event) {

// console.log(event, event.data, '我接收到了')

if (typeof event.data === 'string') {

localStorage.setItem('cookie', event.data)

}

}

window.addEventListener('message', receiveMessage, false)