@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

| Param | Type | Description | eg| | ---------------------| ------------------- | ------------------------------------------- |------------------- | | sdkModule | string | 调用微服务对应的模块 | pay | env | string | 对应的开发环境 | local,dev,test,prod | role | string | 用户身份 | parent，child | loadUrl | string | 对应打开的iframe地址| https://dev-payment.iqidao.com/web/basic-component-sevice/pay?token=' + localStorage.getItem('token') | wrap | string | iframe放置的元素| #pay-iframe | targetOrigin | string | | | | token | string | | localStorage.getItem('token')|