{"id":20920179,"url":"https://github.com/yankouskia/iframy","last_synced_at":"2025-07-18T03:39:37.653Z","repository":{"id":40720694,"uuid":"201559590","full_name":"yankouskia/iframy","owner":"yankouskia","description":"Library for rendering cross-domain components","archived":false,"fork":false,"pushed_at":"2023-01-05T06:42:11.000Z","size":1542,"stargazers_count":21,"open_issues_count":8,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-02T01:41:28.695Z","etag":null,"topics":["cross-domain","iframe","typescript"],"latest_commit_sha":null,"homepage":"https://yankouskia.github.io/iframy/demo/communication.html","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/yankouskia.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-08-10T00:45:56.000Z","updated_at":"2023-11-09T09:18:51.000Z","dependencies_parsed_at":"2023-02-03T16:15:28.602Z","dependency_job_id":null,"html_url":"https://github.com/yankouskia/iframy","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yankouskia%2Fiframy","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yankouskia%2Fiframy/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yankouskia%2Fiframy/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yankouskia%2Fiframy/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/yankouskia","download_url":"https://codeload.github.com/yankouskia/iframy/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253950206,"owners_count":21989321,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["cross-domain","iframe","typescript"],"created_at":"2024-11-18T18:09:06.839Z","updated_at":"2025-05-13T13:32:12.159Z","avatar_url":"https://github.com/yankouskia.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/yankouskia/iframy/pulls) [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/yankouskia/iframy/blob/master/LICENSE) ![GitHub stars](https://img.shields.io/github/stars/yankouskia/iframy.svg?style=social)\n\n[![NPM](https://nodei.co/npm/iframy.png?downloads=true)](https://www.npmjs.com/package/iframy)\n\n# iframy\n\nLibrary for rendering cross-domain components and communication between them\n\n## Installation\n\nnpm:\n\n```sh\nnpm install iframy --save\n```\n\nyarn:\n\n```sh\nyarn add iframy\n```\n\n## DEMO\n\n\u003ca href=\"https://yankouskia.github.io/iframy/demo/communication.html\" target=\"_blank\"\u003eCommunication demo\u003c/a\u003e\n\n## Support\n\n| \u003cimg src=\"https://cdnjs.cloudflare.com/ajax/libs/browser-logos/35.1.0/internet-explorer/internet-explorer_512x512.png\" alt=\"IE\" width=\"48px\" height=\"48px\"/\u003e\u003c/br\u003e Internet Explorer | \u003cimg src=\"https://cdnjs.cloudflare.com/ajax/libs/browser-logos/35.1.0/edge/edge_512x512.png\" alt=\"Edge\" width=\"48px\" height=\"48px\" /\u003e\u003c/br\u003e Microsoft Edge | \u003cimg src=\"https://cdnjs.cloudflare.com/ajax/libs/browser-logos/35.1.0/firefox/firefox_512x512.png\" alt=\"Firefox\" width=\"48px\" height=\"48px\" /\u003e\u003cimg src=\"https://cdnjs.cloudflare.com/ajax/libs/browser-logos/35.1.0/firefox-developer-edition/firefox-developer-edition_512x512.png\" alt=\"Firefox Dev\" width=\"48px\" height=\"48px\" /\u003e\u003c/br\u003e Mozilla Firefox | \u003cimg src=\"https://cdnjs.cloudflare.com/ajax/libs/browser-logos/35.1.0/chrome/chrome_512x512.png\" alt=\"Chrome\" width=\"48px\" height=\"48px\" /\u003e\u003cimg src=\"https://cdnjs.cloudflare.com/ajax/libs/browser-logos/35.1.0/chrome-dev/chrome-dev_512x512.png\" alt=\"Chrome Dev\" width=\"48px\" height=\"48px\" /\u003e\u003cimg src=\"https://cdnjs.cloudflare.com/ajax/libs/browser-logos/35.1.0/archive/chrome-canary_19-48/chrome-canary_19-48_512x512.png\" alt=\"Chrome Canary\" width=\"48px\" height=\"48px\" /\u003e\u003c/br\u003e Google Chrome | \u003cimg src=\"https://cdnjs.cloudflare.com/ajax/libs/browser-logos/35.1.0/opera/opera_512x512.png\" alt=\"Opera\" width=\"48px\" height=\"48px\" /\u003e\u003cimg src=\"https://cdnjs.cloudflare.com/ajax/libs/browser-logos/35.1.0/opera-developer/opera-developer_512x512.png\" alt=\"Opera Dev\" width=\"48px\" height=\"48px\" /\u003e\u003c/br\u003e Opera | \u003cimg src=\"https://cdnjs.cloudflare.com/ajax/libs/browser-logos/35.1.0/safari/safari_512x512.png\" alt=\"Safari\" width=\"48px\" height=\"48px\" /\u003e\u003cimg src=\"https://cdnjs.cloudflare.com/ajax/libs/browser-logos/35.1.0/safari-technology-preview/safari-technology-preview_512x512.png\" alt=\"Safari TP\" width=\"48px\" height=\"48px\" /\u003e\u003cimg src=\"https://cdnjs.cloudflare.com/ajax/libs/browser-logos/35.1.0/safari-ios/safari-ios_512x512.png\" alt=\"Safari iOS\" width=\"48px\" height=\"48px\" /\u003e\u003c/br\u003e Safari | \u003cimg src=\"https://cdnjs.cloudflare.com/ajax/libs/browser-logos/35.1.0/android-webview-beta/android-webview-beta_512x512.png\" alt=\"Android WebView\" width=\"48px\" height=\"48px\" /\u003e\u003c/br\u003e Android WebView\n| --- | --- | --- | --- | --- | --- | ---\n| 10+ * | 12+ | 8+ | 1+ | 9.5+ | 4+ | Yes\n\n\\* - Only for inline mode\n\n## API\n\n### Parent\n\n#### create\n\nUse method to initiate instance and pass necessary props / iframe configuration\n\n`dimensions` - object with `width` and `height` properties, applied to iframe\n\n`props` - any serializable initial data to send to child\n\n`scrolling` - param to highlight whether content inside iframe should be scrollable\n\n`url` - url to open inside child iframe\n\n```js\nimport { IFramyParent } from 'iframy/parent';\n\nconst iframy = IFramyParent.create({\n  dimensions: {\n    width: '80%',\n    height: '80%',\n  },\n  props: {\n    name: 'Alex',\n  },\n  scrolling: true,\n  url: 'https://web-site.com',\n});\n```\n\n#### render\n\nAsync method to render iframe into specific container. Used for lazy rendering of component. Once promise is resolved - child component is ready to be used\n\n`selector` - string / HTMLElement parameter to point container where to render iframe\n\n```js\nimport { IFramyParent } from 'iframy/parent';\n\nconst iframy = IFramyParent.create({\n  dimensions: {\n    width: '80%',\n    height: '80%',\n  },\n  props: {\n    name: 'Alex',\n  },\n  scrolling: true,\n  url: 'https://web-site.com',\n});\n\nawait iframy.render('#container');\n```\n\n#### emit\n\nMethod to send message to child component\n\n```js\niframy.emit('message-type', { any: 'data' });\n```\n\n#### addListener / on\n\nMethod to subscribe to events, being sent from child\n\n```js\niframy.addListener('message-type', data =\u003e console.log(data));\n\n// or use alias\n\niframy.on('message-type', data =\u003e console.log(data));\n```\n\n#### addListenerOnce / once\n\nMethod to subscribe to events, being sent from child; emitted once and listener is removed after that\n\n```js\niframy.addListenerOnce('message-type', data =\u003e console.log(data));\n\n// or use alias\n\niframy.once('message-type', data =\u003e console.log(data));\n```\n\n#### removeListener / off\n\nMethod to remove specific listener from correspondent event type from child\n\n```js\niframy.removeListener('message-type', listener);\n\n// or use alias\n\niframy.off('message-type', listener);\n```\n\n#### removeAllListeners / offAll\n\nMethod to remove all listeners from correspondent event type from child\n\n```js\niframy.removeAllListeners('message-type');\n\n// or use alias\n\niframy.offAll('message-type');\n```\n\n\n### Child\n\n#### create\n\nUse method to initialize child component and let parent know, that your iframe is ready\n\n`api` - object of `{ [key: string]: function }` structure to initialize api, being used by parent\n\n```js\nimport { IFramyChild } from 'iframy/child';\n\nconst iframy = await IFramyChild.create({\n  api: {\n    sendMessage: data =\u003e {;\n      return `Message: ${data}`;\n    },\n  },\n});\n```\n\n#### props\n\nData, passed from parent. Useful to receive initial data from parent window\n\n```js\nconst data = iframy.props;\n```\n\n#### emit\n\nMethod to send message to parent component\n\n```js\niframy.emit('message-type', { any: 'data' });\n```\n\n#### addListener / on\n\nMethod to subscribe to events, being sent from parent\n\n```js\niframy.addListener('message-type', data =\u003e console.log(data));\n\n// or use alias\n\niframy.on('message-type', data =\u003e console.log(data));\n```\n\n#### addListenerOnce / once\n\nMethod to subscribe to events, being sent from parent; emitted once and listener is removed after that\n\n```js\niframy.addListenerOnce('message-type', data =\u003e console.log(data));\n\n// or use alias\n\niframy.once('message-type', data =\u003e console.log(data));\n```\n\n#### removeListener / off\n\nMethod to remove specific listener from correspondent event type from parent\n\n```js\niframy.removeListener('message-type', listener);\n\n// or use alias\n\niframy.off('message-type', listener);\n```\n\n#### removeAllListeners / offAll\n\nMethod to remove all listeners from correspondent event type from parent\n\n```js\niframy.removeAllListeners('message-type');\n\n// or use alias\n\niframy.offAll('message-type');\n```\n\n## Examples\n\nFind example [here](https://github.com/yankouskia/iframy/tree/master/demo)\n\n## Contributing\n\n`iframy` is open-source library, opened for contributions\n\n### Tests\n\n**in progress**\n\n### License\n\niframy is [MIT licensed](https://github.com/yankouskia/iframy/blob/master/LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyankouskia%2Fiframy","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyankouskia%2Fiframy","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyankouskia%2Fiframy/lists"}