。

因为以前很少接触iframe#xff0c;所以对它有点陌生#xff0c;在经过大佬的指点和上网查阅后找到了解决方法…最近有个需求是在父页面打开一个弹窗然后弹窗里面是一个iframe在关闭弹窗时需要把iframe中的audio标签的音频链接清空和做一些其他的操作。

因为以前很少接触iframe所以对它有点陌生在经过大佬的指点和上网查阅后找到了解决方法于是打算写一篇博客记录下iframe之间的通讯。

先说下我那个需求的解决方案我在父页面的关闭弹窗事件中调用window.postMessage()把关闭窗口的信息传到iframeiframe接收到这个信息后就把音频的url重置掉。

父页面detailCancel

document.querySelector(#iframe)iframe.contentWindow.postMessage(close,

*)this.setState({detail_visible:

false,});};//

在didmount生命周期注册message的监听事件当获取到关闭的信息时执行需要的操作window.addEventListener(message,

(e)

然后说一下iframe父子通讯的另一种方式上面提到的这个方法可以适用于父子页面不同域的情况还有一种方法是同域间的父子通讯。

父页面可以通过iframe的id或者name属性直接访问到子iframe的window对象

父页面detailCancel

document.querySelector(#iframe)//

这里改为了在父页面直接调用子iframe页面的resetAudioUrl()方法iframe.window.resetAudioUrl()this.setState({detail_visible:

false,});};//

因为在这种情况我们是直接调用子iframe页面的方法如果在调用时子iframe页面还没有加载完成的话时会导致页面报错的所以上面的代码还需要在父页面的detailCancel()方法这里加一个判断此时的子页面是否加载完成了。

complete来判断

使用onload回调函数把调用子iframe的执行语句放到onload的回调函数里面即可

父页面优化后detailCancel

document.querySelector(#iframe)//

这里改为了在父页面直接调用子iframe页面的resetAudioUrl()方法//

调用之前先判断子iframe是否加载完成了iframe.document.readyState

complete

iframe.window.resetAudioUrl()this.setState({detail_visible:

false,});};//

直接使用window.parent.要调用的父页面的方法就可以了