@aligov/iframe-message

Install

$ npm install @aligov/iframe-message --save

Usage

主页面

import React, { useEffect } from 'react';
import helper from '@aligov/iframe-message';

export default (props) => {
  const { access_token = '' } = props.searchParams || {};
  const iframeUrl = 'http://127.0.0.1:3334/#/demo?access_token=' + (access_token || '');

  useEffect(() => {
    const handshake = helper.parent({
      container: document.getElementById('iframe'), // Element to inject frame into
      url: '*',
    });
    handshake.then((child) => helper.childListeners(child, {
      key: 'access_token',
      val: access_token || ''
    }));

    return () => {
      handshake.then(child => child.destroy());
    };
  }, []);

  return (
    <div>
      <h1>Parent</h1>
      <iframe
        id="iframe"
        src={iframeUrl}
        width="100%"
        height="100%"
      />
    </div>
  );
}

子iframe

扩展请求中间件

以axios中间件为例：

// 扩展Service
import axios from 'axios';
import helper from '@aligov/iframe-message';

// 执行child
helper.child();

// 扩展请求header
axios.interceptors.request.use(async (config) => {
  // Do something before request is sent
  // console.log('config', config);

  // return Promise.resolve(config);

  return helper.requestMiddleware({
    config,
    queryLoginKey: 'access_token',
  });

}, function (error) {
  // Do something with request error
  return Promise.reject(error);
});

export default async (opts = {}) => {
  return await axios(opts);
};

子iframe页面请求

import React, { useEffect } from 'react';
import service from '@/utils/service';

export default (props) => {

  useEffect(() => {
    (async () => {
      // 请求接口，与parent进行通信，存取access_token
      try {
        let ret = await service({
          url: '/serviceTest'
        });
        console.log('ret', ret);
      } catch (err) {}
      
      try {
        let res = await service({
          url: '/abc'
        });
        console.log('res', res);
      } catch (err) {}
    })();
  }, []);

  return (
    <div>
      <h1>Child Demo</h1>
      <a href="/#/demo2">点击跳转到Demo2</a>
    </div>
  );
}

API

Function

|name|param|return|describe| |:---------------|:--------|:----|:----------| |setDebug|boolean|/|设置postmate debug模式| |parent|object|/|主页面设置postmate对象| |childListeners|{child: '子iframe对象'; params: { }}: object|/|主页面添加子iframe监听| |child|object|/|子iframe设置postmate对象| |requestMiddleware|{ config: 'axios请求参数', queryLoginKey: 'query中的登录表示key' }: object|Promise|扩展请求中间件|