aframe-post-message-component

A simple component that reads a JSON object from the Post Message API or from the URL Parameters and fires an event. A common usage scenario would be to update the applications state.

For A-Frame.

API

post-message

This component listes to events from the element and redirects the event detail via postMessage to its parent window. So it only works if the whole A-Frame scene is embedded within an IFrame. The format of the posted message is {type: '', event: '', data: {}}, where the type property is the type and the event as in the schema and the data is the events detail object.

Property	Description	Default Value
enabled	Listen to events and send data as a post message to its parent window	`AFRAME.utils.isIframed`
type	The type name of the post message for the parent to identify
event	Event name to listen and redirect as a post message	loaded

listen-message

Must be attached to the scene entity.

The sent data in the postMessage is opionated by this library and must be of the format {type: '', event: '', data: {}} whereas the event property is optional. The type property must correspond with the type given in the components configuration.

Property	Description	Default Value
enabled	Listen to postMessage events	true
type	The type name of the Post Message data to be check
defaultEvent	Event name to be fired when the received postMessage has no event property	messagePosted

url-parameter

Must be attached to the scene entity.

The URL parameter is in the form &parameter={} whereas the parameter name is defined by the schema and defaults to message

Property	Description	Default Value
enabled	Read URL GET Parameters once when the scene is loaded	true
parameter	Query parameter key name to recognize message from	message
defaultEvent	Event name to be fired when the received message has no event property	messagePosted

Installation

Browser

Install and use by directly including the browser files:

<head>
  <title>My A-Frame Scene</title>
  <script src="https://aframe.io/releases/0.6.0/aframe.min.js"></script> 
  <script src="https://unpkg.com/aframe-post-message-component/dist/aframe-post-message-component.min.js"></script> 
</head>
 
<body>
  <a-scene post-message listen-message url-parameter>
  </a-scene>
</body>

npm

Install via npm:

npm install aframe-post-message-component

Then require and use.

require('aframe');
require('aframe-post-message-component');

aframe-post-message-component