Cross-Domain components rendering / manipulation lightweight library

栏目: IT技术 · 发布时间: 4年前

内容简介:Library for rendering cross-domain components and communication between themnpm:

Cross-Domain components rendering / manipulation lightweight library

iframy

Library for rendering cross-domain components and communication between them

Installation

npm:

npm install iframy --save

yarn:

yarn add iframy

DEMO

Communication demo

Support

Cross-Domain components rendering / manipulation lightweight library

Internet Explorer

Cross-Domain components rendering / manipulation lightweight library

Microsoft Edge

Cross-Domain components rendering / manipulation lightweight library Cross-Domain components rendering / manipulation lightweight library

Mozilla Firefox

Cross-Domain components rendering / manipulation lightweight library Cross-Domain components rendering / manipulation lightweight library Cross-Domain components rendering / manipulation lightweight library

Google Chrome

Cross-Domain components rendering / manipulation lightweight library Cross-Domain components rendering / manipulation lightweight library

Opera

Cross-Domain components rendering / manipulation lightweight library Cross-Domain components rendering / manipulation lightweight library Cross-Domain components rendering / manipulation lightweight library

Safari

Cross-Domain components rendering / manipulation lightweight library

Android WebView

10+ * 12+ 8+ 1+ 9.5+ 4+ Yes

* - Only for inline mode

API

Parent

create

Use method to initiate instance and pass necessary props / iframe configuration

dimensions - object with width and height properties, applied to iframe

props - any serializable initial data to send to child

scrolling - param to highlight whether content inside iframe should be scrollable

url - url to open inside child iframe

import { IFramyParent } from 'iframy/parent';

const iframy = IFramyParent.create({
  dimensions: {
    width: '80%',
    height: '80%',
  },
  props: {
    name: 'Alex',
  },
  scrolling: true,
  url: 'https://web-site.com',
});

render

Async method to render iframe into specific container. Used for lazy rendering of component. Once promise is resolved - child component is ready to be used

selector - string / HTMLElement parameter to point container where to render iframe

import { IFramyParent } from 'iframy/parent';

const iframy = IFramyParent.create({
  dimensions: {
    width: '80%',
    height: '80%',
  },
  props: {
    name: 'Alex',
  },
  scrolling: true,
  url: 'https://web-site.com',
});

await iframy.render('#container');

emit

Method to send message to child component

iframy.emit('message-type', { any: 'data' });

addListener / on

Method to subscribe to events, being sent from child

iframy.addListener('message-type', data => console.log(data));

// or use alias

iframy.on('message-type', data => console.log(data));

addListenerOnce / once

Method to subscribe to events, being sent from child; emitted once and listener is removed after that

iframy.addListenerOnce('message-type', data => console.log(data));

// or use alias

iframy.once('message-type', data => console.log(data));

removeListener / off

Method to remove specific listener from correspondent event type from child

iframy.removeListener('message-type', listener);

// or use alias

iframy.off('message-type', listener);

removeAllListeners / offAll

Method to remove all listeners from correspondent event type from child

iframy.removeAllListeners('message-type');

// or use alias

iframy.offAll('message-type');

Child

create

Use method to initialize child component and let parent know, that your iframe is ready

api - object of { [key: string]: function } structure to initialize api, being used by parent

import { IFramyChild } from 'iframy/child';

const iframy = await IFramyChild.create({
  api: {
    sendMessage: data => {;
      return `Message: ${data}`;
    },
  },
});

props

Data, passed from parent. Useful to receive initial data from parent window

const data = iframy.props;

emit

Method to send message to parent component

iframy.emit('message-type', { any: 'data' });

addListener / on

Method to subscribe to events, being sent from parent

iframy.addListener('message-type', data => console.log(data));

// or use alias

iframy.on('message-type', data => console.log(data));

addListenerOnce / once

Method to subscribe to events, being sent from parent; emitted once and listener is removed after that

iframy.addListenerOnce('message-type', data => console.log(data));

// or use alias

iframy.once('message-type', data => console.log(data));

removeListener / off

Method to remove specific listener from correspondent event type from parent

iframy.removeListener('message-type', listener);

// or use alias

iframy.off('message-type', listener);

removeAllListeners / offAll

Method to remove all listeners from correspondent event type from parent

iframy.removeAllListeners('message-type');

// or use alias

iframy.offAll('message-type');

Examples

Find example here

Contributing

iframy is open-source library, opened for contributions

Tests

in progress

License

iframy is MIT licensed


以上所述就是小编给大家介绍的《Cross-Domain components rendering / manipulation lightweight library》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Java夜未眠

Java夜未眠

蔡学镛 / 电子工业出版社 / 2003-4 / 20.00元

本书是一本散文集。作为一名资深程序设计师,作者走笔清新面独特,简练俏皮的文字下,是作者对工作,对人生的理性思考。书中收录的文章内容贴近程序员的生活,能令读者产生强烈共鸣。此外,书中的部分文章也以轻松的风格剖析了学习Java技术时的常见问题,并以专家眼光和经验推荐介绍了一批优秀的技术书籍,旨在帮助读者兴趣盎然地学习Java。一起来看看 《Java夜未眠》 这本书的介绍吧!

HTML 编码/解码
HTML 编码/解码

HTML 编码/解码

RGB CMYK 转换工具
RGB CMYK 转换工具

RGB CMYK 互转工具

HEX CMYK 转换工具
HEX CMYK 转换工具

HEX CMYK 互转工具