{"id":27111213,"url":"https://github.com/alanwei43/postmessagebus","last_synced_at":"2025-10-19T23:03:36.971Z","repository":{"id":42897026,"uuid":"253227823","full_name":"alanwei43/PostMessageBus","owner":"alanwei43","description":"跨iframe通信小工具","archived":false,"fork":false,"pushed_at":"2023-01-06T02:47:37.000Z","size":605,"stargazers_count":1,"open_issues_count":9,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-11-01T11:52:02.362Z","etag":null,"topics":["crossmessage","javascript","postmessage"],"latest_commit_sha":null,"homepage":null,"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/alanwei43.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":"2020-04-05T12:19:10.000Z","updated_at":"2021-04-02T08:32:20.000Z","dependencies_parsed_at":"2023-02-05T03:45:39.272Z","dependency_job_id":null,"html_url":"https://github.com/alanwei43/PostMessageBus","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alanwei43%2FPostMessageBus","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alanwei43%2FPostMessageBus/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alanwei43%2FPostMessageBus/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alanwei43%2FPostMessageBus/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/alanwei43","download_url":"https://codeload.github.com/alanwei43/PostMessageBus/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247574065,"owners_count":20960495,"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":["crossmessage","javascript","postmessage"],"created_at":"2025-04-07T00:56:57.227Z","updated_at":"2025-10-19T23:03:31.938Z","avatar_url":"https://github.com/alanwei43.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# PostMessageBus\n\n跨iframe通信小工具, 要求浏览器支持 [Proxy](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy) (如果浏览器不支持`Proxy`, 可以使用Google提供的[proxy-polyfill](https://github.com/GoogleChrome/proxy-polyfill)) 和 `URLSearchParams`.\n\n## Install\n\n```bash\nnpm install post-message-bus\n```\n\n或者直接引用\n```html\n\u003cscript src=\"https://blog.alanwei.com/PostMessageBus/dist/post-message-bus.umd.js\"\u003e\u003c/script\u003e\n```\n\n## Use\n\n\n点击访问[例子1](https://blog.alanwei.com/PostMessageBus/test/one/parent.html)\n\n```js\n/**\n * 父级页面\n */ \nvar parentBus = PostMessageBus.generateBusToFrame(\"child.html\", {\n    // 这里定义父级页面的方法, 供子页面调用\n    greet: function (name, child) {\n        // 这里可以继续使用 child 调用iframe中定义的方法\n        return child.getPosition().then(function (pos) {\n            // pos =\u003e /test/one/child.html\n            return `你好${name}, 我知道你来自${pos}. 我叫哈哈.`;\n        });\n    }\n});\nparentBus.then(function ({ request }) {\n    // 这里可以使用 request 调用子页面定义的方法\n    log(\"子页面加载完成\");\n});\n// 将iframe添加到文档中\ndocument.body.append(parentBus.frame);\n\n/**\n * iframe嵌套的子页面\n */\nvar childBus = PostMessageBus.generateBusToParent({\n    // 这里定义的子页面的方法, 供父级页面调用\n    getPosition: function (data, parent) {\n        // 这里可以使用 parent 继续调用父级页面定义的方法\n        return Promise.resolve(location.pathname); //模拟Ajax调用\n    }\n});\nchildBus.greet(\"呵呵\").then(function (val) {\n    log(val); //=\u003e 你好呵呵, 我知道你来自/test/one/child.html. 我叫哈哈.\n});\n```\n\n\n点击访问 [例子2](https://blog.alanwei.com/PostMessageBus/test/multi/parent.html):\n\n父页面使用以下代码初始化: \n```javascript\n var bus1 = PostMessageBus.generateBusToFrame(\"child2.html\", {\n    echo: function (from, req) {\n        log(`received echo ${from}`);\n        return req.getName().then(name =\u003e `Hello ${name}`); // 支持返回 Promise\n    }\n    // 更多响应方法\n});\ndocument.body.append(bus1.frame); //将iframe添加到当前文档.\nbus1.then(({request}) =\u003e {\n    log(\"child1.html is ready\"); // 子页面加载完成.\n    /**\n     * 这里可以使用 request 直接调用iframe内的方法, 比如: \n     * request.sendData(\"some data\").then(iframeResponseData =\u003e \"send successed\");\n     */\n    request.getName().then(name =\u003e name === \"Tim Cook\") // true\n});\n```\n\n子iframe页面使用以下代码初始化:\n\n```javascript\nconst bus = PostMessageBus.generateBusToParent({\n    getName: function () {\n        return \"Tim Cook\";\n    },\n    sendData: function (d) {\n        log(`received parent data: ${d}`);\n    }\n});\n/**\n * bus 可以调用parent内定义的响应方法:\n */ \nbus.echo(location.href).then(greet =\u003e log(greet));\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falanwei43%2Fpostmessagebus","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falanwei43%2Fpostmessagebus","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falanwei43%2Fpostmessagebus/lists"}