iframe的父子页面通信

简介: iframe的父子页面通信

平时工作中有时会遇到页面嵌套的情况,一般是用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);
}
  1. 子页面调用父页面方法
    可以通过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. 父页面发送信息,子页面接收信息
    ```js
    // 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. 子页面发送信息,父页面接收信息
```js
// http://127.0.0.1:8002/child.html
window.top.postMessage('hello, parent!', 'http://127.0.0.1:8001');

// http://127.0.0.1:8001/parent.html
window.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的方式来发送接收信息。

相关文章
|
SQL 前端开发 API
关于ElementUI之动态树+数据表格+分页实例
关于ElementUI之动态树+数据表格+分页实例
577 0
element-ui 里 el-popover 位置发生偏移
element-ui 里 el-popover 位置发生偏移
2222 0
|
JavaScript 内存技术
node与npm版本对应关系以及使用nvm管理node版本
node与npm版本对应关系以及使用nvm管理node版本
7094 0
|
前端开发 API 对象存储
FileSaver.js源码学习,纯前端实现文件下载
FileSaver.js源码学习,纯前端实现文件下载
1102 0
|
安全 JavaScript Java
记一次网站全站http升级为https的过程,websocket : ws升级为wss遇到的问题等
记一次网站全站http升级为https的过程,websocket : ws升级为wss遇到的问题等
2350 0
记一次网站全站http升级为https的过程,websocket : ws升级为wss遇到的问题等
|
JavaScript
Vue3倒计时(Countdown)
这篇文章介绍了如何在Vue 3中创建一个可自定义的倒计时组件(Countdown),允许设置标题、前缀、后缀、格式和样式,并提供了组件的实现代码和使用示例。
1003 2
Vue3倒计时(Countdown)
|
移动开发 资源调度 JavaScript
Vue移动端网页(H5)预览pdf文件(pdfh5和vue-pdf)
这篇文章介绍了在Vue移动端网页中使用`pdfh5`和`vue-pdf`两个插件来实现PDF文件的预览,包括滚动查看、缩放、添加水印、分页加载、跳转指定页数等功能。
8074 1
Vue移动端网页(H5)预览pdf文件(pdfh5和vue-pdf)
vue2 插槽(默认插槽 slot 、具名插槽 v-slot 、作用域插槽 slot-scope -- 插槽传值 )
vue2 插槽(默认插槽 slot 、具名插槽 v-slot 、作用域插槽 slot-scope -- 插槽传值 )
2516 1
|
10月前
|
SQL 存储 关系型数据库
【赵渝强老师】Hive的内部表与外部表
Hive是基于HDFS的数据仓库,支持SQL查询。其数据模型包括内部表、外部表、分区表、临时表和桶表。本文介绍了如何创建和使用内部表和外部表,提供了详细的步骤和示例代码,并附有视频讲解。
587 1
|
前端开发 JavaScript
前端js代码一句话模拟Ctrl+A全选网页内容效果document.execCommand(‘selectAll‘);
前端js代码一句话模拟Ctrl+A全选网页内容效果document.execCommand(‘selectAll‘);