vue中iframe如何让父页面刷新_Vue下iframe如何实现和父窗口的通信

在父窗口页面代码：

1

2

4 :visible.sync="visible"

5 width="30%"

6 class="ifr-dialog"

7 center8 @opened="handleOpened">

9

10

11

12

13

14

15

16 export default{17 name: 'IframeDialog',18 props: {19 visible: {20 type: Boolean,21 default: false

22 },23 src: {24 type: String,25 default: ''

26 }27 },28 data() {29 return{30 iframeWin: {}31 };32 },33 methods: {34 handleOpened() {35 this.iframeWin = this.$refs.iframe.contentWindow;36 },37 handleMessage (event) {38 //根据上面制定的结构来解析iframe内部发回来的数据

39 const data =event.data;40 console.log(data);41 }42 },43 mounted () {44 //在外部vue的window上添加postMessage的监听，并且绑定处理函数handleMessage

45 window.addEventListener('message', this.handleMessage);46 }47 }48

View Code

在iframe页面：

Hello, world!

当前窗口将在 5秒后自动关闭！

function autoCloseWindow() {

var closeIntv = setInterval(function () {

var num = parseInt(document.getElementById('spNumber').innerText, 10);

if (!num) {

// 向父vue页面发送信息

clearInterval(closeIntv);

window.parent.postMessage({

cmd: 'testCmd',

params: {

msg: 'iframe test'

}

}, '*');

} else {

document.getElementById('spNumber').innerText = num - 1;

}

}, 1000);

}

autoCloseWindow();

这里需要注意的是：

1、在vue中是通过给iframe组件添加ref值来注册引用信息，引用指向的就是DOM元素，注册之后就可以通过$refs来查到对应的DOM元素对象了。

2、只有当元素渲染出来之后，在$refs中才能看到对应的DOM元素，所以我把下面这句话放在对话框打开之后执行，而不是放在mount方法里执行。

this.iframeWin = this.$refs.iframe.contentWindow;3、需要注册监听事件：

window.addEventListener('message', this.handleMessage);

4、给对象推送消息：

// 向父vue页面发送信息

window.parent.postMessage({

cmd: 'testA',

params: {

success: true,

data: {}}

}, '*');

// 外部vue向iframe内部传数据

this.iframeWin.postMessage({

cmd: 'testB',

params: {}

}, '*')