iframe 嵌套传值

iframe 页面设置

getData () {
      let _this = this;
      var iframe = document.getElementById('iframeId');
      iframe.onload = function () {
        var data = {
          name: _this.$store.state.user.name,
          uimsMobile: _this.$store.state.user.uimsMobile,
          orgCode: _this.$store.state.user.orgCode,
          company: _this.$store.state.user.company
        };
        // 向子页面传送跨域数据
        iframe.contentWindow.postMessage(JSON.stringify(data), '*');
      };
      // 接受子页面返回数据
      // window.addEventListener('message', function (e) {
      //   console.info('data from 子页面 ---> ' + e.data);
      // }, false);
    }

接收页面

// 接收iframe的数据
    window.addEventListener('message', function (e) {
      var data = JSON.parse(e.data)
      console.info('iframe传值 ---> ', data)
      _this.$store.commit('setIfrmData', data)
      // if (data) {
      //   data.number = 16
      //   // 处理后再发回iframe
      //   window.parent.postMessage(JSON.stringify(data), '*')
      // }
    }, false)
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 元素会创建包含另外一个文档的内联框架(即行内框架); 一、align 属性(不赞成) align属性规定ifram...
    puxiaotaoc阅读 19,771评论 0 14
  • 1、iframe 定义和用法 iframe 元素会创建包含另外一个文档的内联框架(即行内框架)。 HTML 与 X...
    _双眸阅读 2,398评论 0 1
  • 这是一篇原创翻译文章。原文地址。 我们会经常使用iframes来加载第三方的内容、广告或者插件。使用iframe是...
    Saxon_323e阅读 3,639评论 0 3
  • iframe原本的用法在现在看来是不合时宜的,问题太多了,不一一列举,但是它的其他功能却是不错的黑魔法,这里列举一...
    萧玄辞阅读 1,601评论 0 1
  • 本文并不是一篇iframe API文档讲解,因此想了解iframe API的同学请移步 MDN, 我将在现在浏览器...
    injser阅读 4,230评论 3 14