@iqidaosdk/iframe v1.0.20

@iqidaosdk/iframe

基于iframe通道，在不限制技术框架的基础上，实现通用模块与不同项目的数据传输和交互，iframe也输入微前端的一种实现方案

• iframe通道原理

• @iqidaosdk/iframe 扩展

Install

npm install @iqidaosdk/iframe --save

yarn add @iqidaosdk/iframe --save

Code Examples

基础调用

import iqdSdkIframe from '@iqidaosdk/iframe'

 if(window.location.hostname !== 'localhost'){
    const IqdSdkIframe = iqdSdkIframe.init({
      sdkModule:'pay',
      env:'dev',
      role:'parent',
      loadUrl:'https://dev-payment.iqidao.com/web/basic-component-sevice/pay?token=' + localStorage.getItem('token'),
      wrap:'#pay-iframe',
      targetOrigin:'https://dev-payment.iqidao.com',
    })
  }

订阅和发送消息

import iqdSdkIframe from '@iqidaosdk/iframe'

 if(window.location.hostname !== 'localhost'){
    const IqdSdkIframe = iqdSdkIframe.init({
      sdkModule:'pay',
      env:'dev',
      role:'parent',
      loadUrl:'https://dev-payment.iqidao.com/web/basic-component-sevice/pay?token=' + localStorage.getItem('token'),
      wrap:'#pay-iframe',
      targetOrigin:'https://dev-payment.iqidao.com',
    })
    // 调用微服务的事件，type=‘event’
    IqdSdkIframe.channel.postMessage('parent',{
      type:'event',
      message: {
        order_id:1
      },
      eventName:'pay'
    })
    
  }
  // 监听微服务消息
     IqdSdkIframe.channel.subscribe('child', (data,message,event) => {
      console.log(data)
      return data
    })
  // 销毁iframe模块
     IqdSdkIframe.destroy()

API Documentation