Skip to content

Общение окон с разных доменов: postMessage

Notifications You must be signed in to change notification settings

sinups/post-message

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

2 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Post messages

NPM version NPM version NPM version

Simple postMessage API. Allows for subscribing and easy back and forth messaging between iframes.

Table of Contents

Install

$ npm install --save @sinups/post-message

Usage

One way usage

Send a message to another frame.

import { sendPostMessage, onPostMessage } from "@sinups/post-message";

// Frame A: send a message to frame B
sendPostMessage({
  target: frameB,
  eventName: "hello",
  data: { foo: "bar" },
});

// Frame B: receive message from frame A
onPostMessage({
  eventName: "hello",
  callback: (event, data) => {
    console.log(data); // output: { foo: 'bar' }
  },
});

Two way usage

Send a message to another frame and get a response back

import { requestPostMessage, replyOnPostMessage } from '@sinups/post-message'

// Frame A: send request to frame B, and await reply
requestPostMessage({
  target: frameB,
  eventName: 'getStatus'
}).then(res => {
    console.log(res); // output: { status: 'OK' }
});

// Frame B: receive message from frame A, and send reply back
replyOnPostMessage({
  eventName: 'getStatus',
  callback: event => ({ status: 'OK' });
});

You can also respond with a promise:

replyOnPostMessage({
  eventName: "getStatus",
  callback: (event) =>
    new Promise((resolve) => {
      setTimeout(() => {
        resolve({ status: "Still OK" });
      }, 1000);
    }),
});

API

sendPostMessage

sendPostMessage({
  target: DOMElement<iframe>,
  eventName: string,
  data: any,
  targetOrigin = '*': string,
}): void
  • target: iframe,
  • eventName: string, is used to identify the specific event
  • data: Almost any data type, see this article for a complete list
  • targetOrigin: See this article for more information about this parameter

onPostMessage

onPostMessage({
  eventName: string,
  callback: (event, data) => void,
}): () => void,

Returns an unsubscribe function, to cancel future events from invoking the callback function.

  • eventName: string, is used to identify the specific event
  • callback: function that will be invoked when the specified event is received. receives 2 arguments, the entire event and the sent data field.

requestPostMessage

requestPostMessage({
  target: DOMElement<iframe>,
  eventName: string,
  data: any,
  targetOrigin = '*': string,
}): Promise<any>

Very similar to sendPostMessage but will return a promise that will resolve with the result of the target's replyOnPostMessage listener.

  • target: iframe,
  • eventName: string, is used to identify the specific event
  • data: Almost any data type, see this article for a complete list
  • targetOrigin: See this article for more information about this parameter

replyOnPostMessage

replyOnPostMessage({
  eventName: string,
  callback: (event, data) => Promise<any> | any,
}): () => void,

Very similar to onPostMessage but allows the callback function to return an object to be send back to the other iframe requestPostMessage Promise.

Returns an unsubscribe function, to cancel future events from invoking the callback function.

  • eventName: string, is used to identify the specific event
  • callback: (promise) function that will be invoked when the specified event is received. receives 2 arguments, the entire event and the sent data field. the return value from this function will be sent back to the requestPostMessage iframe.

unsubscribeAll

Usage:

import { unsubscribeAll } from "@sinups/post-message";
unsubscribeAll();

Calling this function will remove all current listeners that were set up using onPostMessage and replyOnPostMessage.

About

Общение окон с разных доменов: postMessage

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published