<template>
<div class="container">
<div id="message"></div>
</div>
</template>
<script>
export default {
data () {
return {
postData: {
name: 'professionalDatum',
key: '567890'
}
}
},
mounted () {
window.onload = () => {
// 父级页面发送消息
document.getElementById('child').contentWindow.postMessage(this.postData, '*')
console.log('send')
// 父级页面接收消息
window.addEventListener('message', function (e) {
if (e.data.key === '123456') {
window.document.getElementById('message').innerHTML = e.data.msg
}
}, false)
}
},
}
</script>
<template>
<div class="container">
<div id="message"></div>
<button @click="sendToParent">发送</button>
</div>
</template>
<script>
export default {
mounted () {
window.onload = () => {
// 子页面接收消息
window.addEventListener('message', function (e) {
if (e.data.key === '567890') {
window.document.getElementById('message').innerHTML = e.data.name
}
}, false)
}
},
methods: {
// 子页面发送消息
sendToParent () {
window.parent.postMessage({
msg: 'hideselfService',
key: '123456'
}, '*')
}
}
}
</script>
