跨域数据利用iframe传输示例

最新推荐文章于 2024-03-22 11:18:02 发布

BraggTroy

最新推荐文章于 2024-03-22 11:18:02 发布

阅读量942

点赞数

分类专栏： WEB前端开发（HTNL5） WEB前端开发（JavaScript）文章标签： javascript

本文链接：https://blog.csdn.net/BraggTroy/article/details/123917416

版权

iframe 跨域通信 postMessage 数据交换前端开发

关键词由CSDN通过智能技术生成

WEB前端开发（JavaScript）同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

WEB前端开发（HTNL5）

2 篇文章 0 订阅

订阅专栏

点击入口栏，跳转本域空白页iframe铺满全屏加载目标页，选择数据后postMessage到父页面，父页面读取数据并回退到业务页，业务页读取已记录的地址并刷新数据。

主项目：

<iframe id='addressIframe' onLoad={initPostEvt} style={{'zIndex': 666, 'display': 'block', 'width': '100%', height: '100%', position: 'fixed'}} 
      src='https://local.test.tianchendajiankang.com:3002/#/newAddAdressList?from=b2c&originFrom=b2c&shopId=58&shopLat=23.097027&shopLng=113.2701'></iframe>

const evtCall = (e) => {
  if (e.origin === 'https://local.test.tianchendajiankang.com:3002') {
	  // 本地缓存或者redux
    window.sessionStorage.setItem('b2caddress', JSON.stringify(e.data))
    window.history.go(-1)
  }
}
const initPostEvt = () => {
  let receiver = document.getElementById('addressIframe').contentWindow;
  receiver.postMessage("Hello", "https://local.test.tianchendajiankang.com:3002");// 主动握手使子页面逻辑初始化
  // window.removeEventListener('message', evtCall)
  window.addEventListener('message', evtCall)
}

目标项目：

componentDidMount() {
    const this_ = this;
    window.addEventListener('message', function(e) {
        if (e.origin === 'https://local.test.tianchendajiankang.com:3010') {
            this_.frameSource = e.source;  // 初始化合法页面源
        }
    })
}
// 点击地址post数据
choseAddress(e, data) {
        let { from, doctorShop ,prescriptionId,channel,latitude,longitude, ejkToken,shopId,deliveryTypeStr} = this.query;
        if (from == 'b2c') {
            this.frameSource && this.frameSource.postMessage(data, 'https://local.test.tianchendajiankang.com:3010')
            return;
        }
}