{"id":13451909,"url":"https://github.com/pshihn/windtalk","last_synced_at":"2025-08-20T10:31:56.955Z","repository":{"id":31867410,"uuid":"129434642","full_name":"pshihn/windtalk","owner":"pshihn","description":"Simplest way to communicate with iFrames and other windows","archived":false,"fork":false,"pushed_at":"2022-12-30T17:19:00.000Z","size":845,"stargazers_count":132,"open_issues_count":6,"forks_count":9,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-12-10T00:42:08.485Z","etag":null,"topics":["iframe","javascript-proxy","javascript-utility","proxy","rpc","window"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/pshihn.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":"2018-04-13T17:35:54.000Z","updated_at":"2024-12-03T17:38:46.000Z","dependencies_parsed_at":"2023-01-14T19:56:43.574Z","dependency_job_id":null,"html_url":"https://github.com/pshihn/windtalk","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pshihn%2Fwindtalk","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pshihn%2Fwindtalk/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pshihn%2Fwindtalk/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pshihn%2Fwindtalk/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pshihn","download_url":"https://codeload.github.com/pshihn/windtalk/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":230415318,"owners_count":18222158,"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":["iframe","javascript-proxy","javascript-utility","proxy","rpc","window"],"created_at":"2024-07-31T07:01:06.654Z","updated_at":"2024-12-19T10:09:16.182Z","avatar_url":"https://github.com/pshihn.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"![windtalk banner](https://pshihn.github.io/windtalk/images/banner.png)\n\n# WindTalk\n\nA seamless way for two \u003cb\u003e\u003ci\u003eWIND\u003c/i\u003e\u003c/b\u003eows to \u003cb\u003e\u003ci\u003eTALK\u003c/i\u003e\u003c/b\u003e to each other. \n\nWindtalk exports a function or an object from within an iFrame or Window. This can now be invoked from any other window.\n\n* All calls are async. Works great with async/await\n* Only 677 bytes gzipped\n\n## Motivation\n\nHow does code in one window communicate with an iFrame or another window?\n\nThe traditional way to do this is by passing messages (See [`postMessage`](https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage)). The host window will send a message to iFrame. iFrame will receive a message, parse the message and then call some code. The iFrame will then take the result of the code and then send a message to the host window with the result. The host window will now receive the message, parse it, and then call its own code. \n\nIn theory, this is fine. One can wrap this boilerplate message parsing to make the life easier. But when you have new code to add, you have to add another `if` clause in message parsing and then call the new code. \n\nWouldn't it be nice if we could just _call the code in the other window like **any other code!**_\n\n```javascript\nobjectInIframe.name = 'Bilbo Baggins';\nawait objectInIframe.updateProfile();\nobjectInIframe.resize();\n```\n\nThis is possible to achieve if all the message boilerplate code is tethered behind a [proxy](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy).\n\n_This is where WindTalk comes in and provides you with that capability._\n\n\n## Usage\n\nWindTalk is essentially two methods:\n\n_**expose**_ makes a function or object available to other windows. \n\n_**link**_ creates an interface for the exposed method/object in another winow\n\nLet's consider a case where a parent window wants to interact with an object in an iframe.\n\nIn the iframe:\n```javascript\nconst color = {\n  red: 0,\n  green: 0,\n  blue: 0,\n  update: function () {\n    // update the ui\n  }\n};\nwindtalk.expose(color);\n```\nIn parent window:\n```javascript\nconst color = windtalk.link(iframe.contentWindow);\ncolor.red = 200;\ncolor.green = 150;\ncolor.blue = 10;\ncolor.update();\n```\n\n### Expose Functions (not just objects)\n\nWindow1:\n```javascript\nfunction doAdd(a, b) {\n  return a + b;\n}\nwindtalk.expose(doAdd);\n```\nWindow2:\n\n```javascript\nconst doAdd = windtalk.link(win1);\nlet result = await doAdd(2, 3);\nconsole.log(result); // 5\n```\n\n### Bidirectional\n\nCode in an iFrame can be invoked from the parent Window, and vice versa. Any one can invoke the exposed object if they have a reference to the Window object.\n\n## Install\n\nDownload the latest from [dist folder](https://github.com/pshihn/windtalk/tree/master/dist)\n\nor from npm:\n```\nnpm install --save windtalk\n```\n\nuse it in ES6 modules:\n```javascript\nimport { expose, link } from 'windtalk';\n```\n\n## License\n[MIT License](https://github.com/pshihn/windtalk/blob/master/LICENSE) (c) [Preet Shihn](https://twitter.com/preetster)\n\n### You may also be interested in\n[Workly](https://github.com/pshihn/workly) - A really simple way to move a function or class to a web worker. Or, expose a function or object in a web worker to the main thread.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpshihn%2Fwindtalk","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpshihn%2Fwindtalk","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpshihn%2Fwindtalk/lists"}