Iframe communication

This guide describes how to configure FontoXML to use iframe communication instead of our postMessage API.

FontoXML can be opened as an iframe. To allow communication between FontoXML and the host application. A common use case of this is offering a way to end the editing session from inside FontoXML by saving the opened documents and closing the editor or causing FontoXML to go full screen.

Communicating from the FontoXML iframe to its parent window

This use case describes direct interactions from the user that require direct feedback from the CMS. Examples interactions are: ‘Close FontoXML and return to the CMS’, ‘Save and close and return to the CMS’, ‘Toggle full screen’.

  1. If the user clicks one of these buttons, FontoXML uses the HTML5 standard postMessage API to send the command to its parent window or frame. See postMessage API documentation for details.
  2. The messageString is a serialized JSON representation of the message object.
  3. The message object will always contain the following properties:
    1. type: The message type, for example fontoxml-close or fontoxml-toggle-fullscreen.
    2. scope: The scope object that was passed when FontoXML was opened, as specified in the CMS Connector contract.
    3. metadata: An object that may contain command specific properties.
  4. The JavaScript on the CMS’s page that created the iframe should listen to these messages using .addEventListener('message', callback) or .attachEvent('onmessage', callback)– depending on the browser – and act accordingly. The CMS is responsible for closing the iframe, resizing the iframe, releasing locks and/or cleaning up automatic saves if necessary.

Example usage

Save and close

One of the send-close-signal-to-iframe, the send-close-signal-to-iframe-discarding-changes and the save-and-release-all-locks-and-send-close-signal-to-iframe operations can be used to initiate a save and close operation. These operations trigger a postMessage event with the type set to "fontoxml-close" and the metadata set to an object containing the discardChanges field, which is a boolean.

Full screen

The sendToggleFullScreen method on IframeCommunicationManager uses the postMessage API to send a message to the parent window with the type set to fontoxml-toggle-fullscreen and the metadata containing a boolean property named isInFullScreenMode describing whether a full screen mode is requested. Call this method from an action to be able to use it from an operation.