前端QQ群: 981668406
在此附上我的QQ: 2489757828 有问题的话可以一同探讨
我的github: 李大玄
我的私人博客: 李大玄
我的私人博客: 李大玄
我的npm开源库: 李大玄
我的简书: 李大玄
我的CSDN: 李大玄
父页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script crossorigin="anonymous" integrity="sha512-L3RMF4eoFlxobBz3eDQ01XuDSNJfcxPLC+VEsxDS0b0rgn2zVKDtx8P/+ARrJIpRDSnYrbUFjDKoFepXE/pj+Q==" src="http://lib.baomitu.com/vue/2.7.2/vue.min.js"></script>
<style>
html,
body {
width: 100%;
height: 100%;
}
#app {
width: 100%;
height: 100%;
border: 2px solid red;
}
</style>
</head>
<body>
<div id="app">
11{
{name}}
<iframe src="http://192.168.221.104:2345/2index.html" frameborder="0"></iframe>
</div>
<script>
new Vue({
el: '#app',
data() {
return {
name: '李asdasd玄'
}
},
mounted() {
window.addEventListener('message', (e) => this.parent(e))
},
methods: {
parent(e) {
console.log('11111111111');
console.log(e.data) //e.data为传递过来的数据
console.log(e.origin) //e.origin为调用 postMessage 时消息发送方窗口的 origin（域名、协议和端口）
console.log(e.source) //e.source为对发送消息的窗口对象的引用，可以使用此来在具有不同origin的两个窗口之间建立双向通信
console.log('这是父级的方法');
// str.replace(/\s*/g, '');
}
},
})
</script>
</body>
</html>
子页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script crossorigin="anonymous" integrity="sha512-L3RMF4eoFlxobBz3eDQ01XuDSNJfcxPLC+VEsxDS0b0rgn2zVKDtx8P/+ARrJIpRDSnYrbUFjDKoFepXE/pj+Q==" src="http://lib.baomitu.com/vue/2.7.2/vue.min.js"></script>
<style>
#app {
width: 200px;
height: 200px;
border: 2px solid green;
}
</style>
</head>
<body>
<div id="app">
11{
{name}}
<button @click="son">子按钮</button>
</div>
<script>
new Vue({
el: '#app',
data() {
return {
name: '李大玄'
}
},
mounted() {
},
methods: {
son() {
console.log('w222222222');
window.parent.postMessage('hello world', '*')
// console.log('这是子子子子子级的方法');
}
},
})
</script>
</body>
</html>