post-robot

> 编程语言

Open source

Cross domain post-messaging on the client side using a simple listener/client pattern.

785 stars0 likes2 views

Website GitHub

About

Cross domain post-messaging on the client side using a simple listener/client pattern.

post-robot [:]-\- {

let user = await getUser(data.id);

return { id: data.id, name: user.name, }; });


```javascript
try {
  let { source, origin, data } = await postRobot.send(someWindow, `getUser`, {
    id: 1337,
  });
  console.log(source, origin, "Got user:", data.name);
} catch (err) {
  console.error(err);
}

Secure Message Channel

For security reasons, it is recommended that you always explicitly specify the window and domain you want to listen to and send messages to. This creates a secure message channel that only works between two windows on the specified domain:

javascript

postRobot.on(
  "getUser",
  { window: childWindow, domain: "http://zombo.com" },
  function (event) {
    return {
      id: event.data.id,
      name: "Frodo",
    };
  }
);

javascript

postRobot
  .send(someWindow, "getUser", { id: 1337 }, { domain: "http://zombo.com" })
  .then(function (event) {
    console.log(event.source, event.origin, "Got user:", event.data.name);
  })
  .catch(function (err) {
    console.error(err);
  });

Functions

Post robot lets you send across functions in your data payload, fairly seamlessly.

For example:

javascript

postRobot.on("getUser", function (event) {
  return {
    id: event.data.id,
    name: "Nogbad the Bad",

    logout: function () {
      currentUser.logout();
    },
  };
});

javascript

postRobot.send(myWindow, "getUser", { id: 1337 }).then(function (event) {
  var user = event.data;

  user.logout().then(function () {
    console.log("User was logged out");
  });
});

…


   [ Parent page ]

+---------------------+          [ Popup ]
|        xx.com       |
|                     |      +--------------+
|  +---------------+  |      |    yy.com    |
|  |    [iframe]   |  |      |              |
|  |               |  |      |              |
|  | yy.com/bridge |  |      |              |
|  |               |  |      |              |
|  |               |  |      |              |
|  |               |  |      |              |
|  |               |  |      +--------------+
|  +---------------+  |
|                     |
+---------------------+

a. Use the special ie build of post-robot: dist/post-robot.ie.js.

b. Create a bridge path on the domain of your popup, for example http://yy.com/bridge.html, and include post-robot:

xml

c. In the parent page on xx.com which opens the popup, include the following javascript:

xml

Now xx.com and yy.com can communicate freely using post-robot, in IE.