@toojs/dove

dove

An common iframe resolution.

Table of Contents

• Install
• Usage
• API
• Contributors
• License

Install

npm install @weiyi/dove --registry=http://npm.guahao-inc.com

Usage

// 宿主页面
import Dove from '@weiyi/dove';
import createIndicatorPlugin from '@weiyi/dove/lib/plugins/indicator';

const dove = new Dove({
  // 全局钩子注册
  hooks: {
    success: [
      () => {
        // iframe 成功挂载后
      }
    ],
    pluginApply: [
      (pluginName, plugin) => {
        // 插件应用后的事件
      }
    ]
  },
});

dove.use(createIndicatorPlugin());
dove.load('/child.html', '#container', {
  // postmate model options
  model: {
    foo: 'blabla',
  },
});

// iFrame 内容页面
import Dove from 'dove';

const parasite = new Dove.Injection({
  // 子页面插件注册
  plugins: [],
  // 可以重复注册 model, 但是相同的 model 会被覆盖
  model: {
    foo: 'blablabla',
    someMethod: function() {
      // do something
    }
  }
})

parasite.init();

举个例子

更多初始化配置项

const hostIns = new Dove({
  // frame 挂载点
  container: '#container',
  // frame 页面加载超时时间，默认为 20 秒
  timeout: 20 * 1000,
  // 全局钩子注册
  hooks: {
    success: [
      () => {
        // iframe 成功挂载后
      }
    ],
    error: [
      (error) => {
        // 发生错误时触发的生命周期钩子
      }
    ],
    pluginApply: [
      (pluginName, plugin) => {
        // 插件应用后的事件
      }
    ]
  },
});

新的挂载点

const hostIns = new Dove({
  container: '#container',
});

hostIns.load('/child2.html', {
  container: '#another-container',
});

增加自定义事件监听

const hostIns = new Dove({
  container: '#container',
});

hostIns.load('/child2.html');

hostIns.on('custom-event', function() {
  // do something

  // 手动移出事件
  this.off('custom-event');
});

// 一次性事件，
hostIns.once(
  'custom-event2',
  function() {
    // do something
  }
);

hostIns.dispatch('custom-event');
// custom-event2 会在执行一次后自动销毁
hostIns.dispatch('custom-event2');

Contributors

Name
Junshu Wang