iframe跨域传值踩坑

我在React项目中使用iframe加载angular项目的页面,想要传一串用户信息,由于跨域,采用了HTML5的新方法postMessage()。
花了很多时间,就是传不过去消息,然后angular本地服务也会发一条message,导致我误以为消息是通的,但是消息体不正确,origin也不正确,


误导我的那条消息

网上翻了个遍也没有找到解决方法,在一次不经意的尝试中,我使用了setTimeout,延时3s,我靠,成功了;


setInterval

总结原因就是必须等到iframe页面完全加载完,消息才能发送成功,我也尝试监听iframe的onload函数,但是始终不会执行。

注:纠正以上 “监听iframe的onload函数,但是始终不会执行”,必须获取到iframe元素进行监听,会成功的。

 let iframe = document.getElementById('inp-oldAdmissionAssess-iframe');
 iframe.onload = () => {
      this.iframe = window.frames['inp-oldAdmissionAssess-iframe'];
      this.iframe.postMessage(JSON.stringify(option), URL);
      console.log(iframe)
  }

2020-10-29更新:

js:
  iframeLoad = (e) => {
    const { userMessage } = this.state;
    let option = {
      id: 'init',
      data: {
        userMessage
      },
      origin: location.origin
    };
    e.target.contentWindow.postMessage(option, URL);//向iframe里传信息
  }
html:
        <iframe
          name={ID}
          id={ID}
          onLoad={this.iframeLoad}
          src={_src}
          width="100%"
          height="100%"
          frameBorder={0}
          scrolling="auto">
        </iframe>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1、iframe 定义和用法 iframe 元素会创建包含另外一个文档的内联框架(即行内框架)。 HTML 与 X...
    _双眸阅读 2,364评论 0 1
  • 1. 什么是跨域? 跨域一词从字面意思看,就是跨域名嘛,但实际上跨域的范围绝对不止那么狭隘。具体概念如下:只要协议...
    w_zhuan阅读 527评论 0 0
  • 1. 什么是跨域? 跨域一词从字面意思看,就是跨域名嘛,但实际上跨域的范围绝对不止那么狭隘。具体概念如下:只要协议...
    他在发呆阅读 829评论 0 0
  • 一 、JSONP 利用script标签的src属性天然可以跨域的特点,在跨域脚本中可以直接回调当前脚本的函数 va...
    海子小夜曲阅读 309评论 0 0
  • 元素会创建包含另外一个文档的内联框架(即行内框架); 一、align 属性(不赞成) align属性规定ifram...
    puxiaotaoc阅读 19,764评论 0 14