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》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

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

大师之路

大师之路

赵鹏 / 人民邮电出版社 / 2007-12 / 79.00元

《大师之路:Photoshop中文版完全解析》以介绍Photoshop选区、图层、路径3大基础为主线,从色彩原理入手,注重基础知识,辅以大量实例,全面剖析了Photoshop的应用。对于其他内容,如色彩调整和各类工具的应用,也均采用与实际操作相结合的方式进行讲解。另外,还简单明了地介绍了扩展应用的领域。所附教学光盘的内容可自成一套独立的视频教学体系。本书完全按照初学者的认知角度编写,重点介绍图像原......一起来看看 《大师之路》 这本书的介绍吧!

JS 压缩/解压工具
JS 压缩/解压工具

在线压缩/解压 JS 代码

JSON 在线解析
JSON 在线解析

在线 JSON 格式化工具

正则表达式在线测试
正则表达式在线测试

正则表达式在线测试