iframe的父子页面通讯

开发者 · 2024-9-15 10:09:49

寻常工作中偶尔会遇到页面嵌套的环境，一样寻常是用iframe办理。那么，两个页面怎样通讯呢？下面分两种环境举行：
一、父子页面同源的环境

现在有两个差异源的iframe嵌套页面，父页面parent.html,子页面child.html，二者代码如下：
// parent.html// ...<iframe  id='testIframe'  name='test'  src='./child.html'  frameborder='0'  scrolling='no'></iframe><script type="text/javascript"> function parentConsole(data) {       console.log(data) }</script>// ...// child.html// ...<script type="text/javascript"> function childConsole(data) {       console.log(data) }</script>// ...1. 父页面调用子页面方法

可以通过iframe的id大概name属性拿到iframe的window对象，然后直接调用子页面方法即可。我们把须要发送给子页面的信息放到方法childConsole里。如下：
var iframeDom = document.getElementById('testIframe');// 须要等iframe加载完成后实行，否则有大概会报错iframeDom.onload = function () { var data = 'hello, child!'; iframeDom.contentWindow.childConsole(data);}或
var iframeDom = document.getElementById('testIframe');iframeDom.onload = function () { var data = 'hello, child!'; test.window.childConsole(data);}2. 子页面调用父页面方法

可以通过window.top大概window.parent拿到父页面的window对象。然后直接调用父页面的方法即可。同样，把须要发给父页面的信息放到方法parentConsole里。如下：
var data = 'hello, parent!';window.top.parentConsole(data); // 大概使用window.parent.parentConsole(data)也行二、父子页面跨域的环境

可以通过postMessage来实现通讯。
otherWindow.postMessage(message, targetOrigin, [transfer]);此中的参数：
otherWindow
目标窗口。好比 iframe 的 contentWindow 属性
message
将要发送到其他窗口的数据。
targetOrigin
目标窗口的域。其值可以是字符串"*"（体现无穷制）大概一个 URI。不提供确切的 targetOrigin 将导致数据泄漏到任何对数据感爱好的恶意站点。
现在有两个差异源的iframe嵌套页面，父页面http://127.0.0.1:8001/parent.html,子页面http://127.0.0.1:8002/child.html（当地分别对两个html起了两个服务），此中父页面嵌套部分代码如下：
// http://127.0.0.1:8001/parent.html<iframe  id='testIframe'  name='test'  src='http://127.0.0.1:8002/child.html'  frameborder='0'  scrolling='no'></iframe>1. 父页面发送信息，子页面吸取信息

// http://127.0.0.1:8001/parent.html// 父页面发送信息document.getElementById('testIframe').onload = function () { test.window.postMessage('hello, child!', 'http://127.0.0.1:8002');}// http://127.0.0.1:8002/child.html// 子页面吸取信息window.addEventListener('message', e => { // 通过origin对消息举行过滤，制止遭到XSS攻击 if (e.origin === 'http://127.0.0.1:8001') {       console.log(e.origin) // 父页面所在的域       console.log(e.data)  // 父页面发送的消息, hello, child! }}, false);2. 子页面发送信息，父页面吸取信息

// http://127.0.0.1:8002/child.htmlwindow.top.postMessage('hello, parent!', 'http://127.0.0.1:8001');// http://127.0.0.1:8001/parent.htmlwindow.addEventListener('message', e => { // 通过origin对消息举行过滤，制止遭到XSS攻击 if (e.origin === 'http://127.0.0.1:8002') {       console.log(e.origin) // 子页面所在的域       console.log(e.data)  // 子页面发送的消息, hello, parent! }}, false);通过postMessage和window.addEventListener('message', e => { ... })共同使用，我们就可以大概完成跨域iframe父子页面的通讯。
固然对于同源的iframe父子页面也可以接纳postMessage的方式来发送吸取信息。
参考资料：
postMessage API：https://developer.mozilla.org/zh-CN/docs/Web/API/Window/postMessage
iframe跨域通讯(postMessage)：https://juejin.cn/post/6844904120680185869

iframe的父子页面通讯

所属分类: 问答交流

新帖推荐: 30日

推荐作品