https://github.com/alanwei43/postmessagebus
跨iframe通信小工具
https://github.com/alanwei43/postmessagebus
crossmessage javascript postmessage
Last synced: 3 months ago
JSON representation
跨iframe通信小工具
- Host: GitHub
- URL: https://github.com/alanwei43/postmessagebus
- Owner: alanwei43
- License: mit
- Created: 2020-04-05T12:19:10.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-06T02:47:37.000Z (about 3 years ago)
- Last Synced: 2024-11-01T11:52:02.362Z (about 1 year ago)
- Topics: crossmessage, javascript, postmessage
- Language: JavaScript
- Size: 591 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# PostMessageBus
跨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`.
## Install
```bash
npm install post-message-bus
```
或者直接引用
```html
```
## Use
点击访问[例子1](https://blog.alanwei.com/PostMessageBus/test/one/parent.html)
```js
/**
* 父级页面
*/
var parentBus = PostMessageBus.generateBusToFrame("child.html", {
// 这里定义父级页面的方法, 供子页面调用
greet: function (name, child) {
// 这里可以继续使用 child 调用iframe中定义的方法
return child.getPosition().then(function (pos) {
// pos => /test/one/child.html
return `你好${name}, 我知道你来自${pos}. 我叫哈哈.`;
});
}
});
parentBus.then(function ({ request }) {
// 这里可以使用 request 调用子页面定义的方法
log("子页面加载完成");
});
// 将iframe添加到文档中
document.body.append(parentBus.frame);
/**
* iframe嵌套的子页面
*/
var childBus = PostMessageBus.generateBusToParent({
// 这里定义的子页面的方法, 供父级页面调用
getPosition: function (data, parent) {
// 这里可以使用 parent 继续调用父级页面定义的方法
return Promise.resolve(location.pathname); //模拟Ajax调用
}
});
childBus.greet("呵呵").then(function (val) {
log(val); //=> 你好呵呵, 我知道你来自/test/one/child.html. 我叫哈哈.
});
```
点击访问 [例子2](https://blog.alanwei.com/PostMessageBus/test/multi/parent.html):
父页面使用以下代码初始化:
```javascript
var bus1 = PostMessageBus.generateBusToFrame("child2.html", {
echo: function (from, req) {
log(`received echo ${from}`);
return req.getName().then(name => `Hello ${name}`); // 支持返回 Promise
}
// 更多响应方法
});
document.body.append(bus1.frame); //将iframe添加到当前文档.
bus1.then(({request}) => {
log("child1.html is ready"); // 子页面加载完成.
/**
* 这里可以使用 request 直接调用iframe内的方法, 比如:
* request.sendData("some data").then(iframeResponseData => "send successed");
*/
request.getName().then(name => name === "Tim Cook") // true
});
```
子iframe页面使用以下代码初始化:
```javascript
const bus = PostMessageBus.generateBusToParent({
getName: function () {
return "Tim Cook";
},
sendData: function (d) {
log(`received parent data: ${d}`);
}
});
/**
* bus 可以调用parent内定义的响应方法:
*/
bus.echo(location.href).then(greet => log(greet));
```