前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >原生iframe 父子页面通讯

原生iframe 父子页面通讯

作者头像
biaoblog.cn 个人博客
发布2022-08-11 19:54:53
6320
发布2022-08-11 19:54:53
举报

html

代码语言:javascript
复制
<iframe id="kiwiIframe" v-if="showPickForm" src="${chrome.runtime.getURL("iframes/notSupport.html")}">

1.父页面向子页面传递值

代码语言:javascript
复制
          let kiwiIframe = document.querySelector("#kiwiIframe");
          kiwiIframe.contentWindow.postMessage("support_ok", "*");

2.子页面接受值

代码语言:javascript
复制
    window.addEventListener("message", function () {
      // console.log(event.data);
      switch (event.data) {
        case "support_ok":
                   console.log('????')
          break;
      }
    });

3.子页面再向父页面传递值

代码语言:javascript
复制
 window.parent.postMessage("support", "*");

4.父页面再次接受值

代码语言:javascript
复制
          window.addEventListener("message", function (event) {
            // console.log(event);
            switch (event.data) {
              case "support":
               console.log('?????')
                break;
            }
          });
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1.父页面向子页面传递值
  • 2.子页面接受值
  • 3.子页面再向父页面传递值
  • 4.父页面再次接受值
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档