@aligov/iframe-message
TypeScript icon, indicating that this package has built-in type declarations

0.2.1 • Public • Published

@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 扩展请求中间件

Readme

Keywords

Package Sidebar

Install

npm i @aligov/iframe-message

Weekly Downloads

7

Version

0.2.1

License

MIT

Unpacked Size

135 kB

Total Files

14

Last publish

Collaborators

  • jasoncapricorn
  • qingkaili
  • huguoxin
  • shenyu.wsy
  • liunian
  • tao1991123
  • itrip
  • xiazhiqiang
  • mo.zhou
  • guoliang.hgl
  • daip
  • baizhao