Iframe communication

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

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

Communicating from the Fonto Editor 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 Fonto Editor 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, Fonto Editor 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 Fonto Editor 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.


The current implementation requires the origin of the page including the iframe and the page hosting the Fonto Editor JavaScript bundle to be on the same origin. If the page with the iframe is hosted on example.com, Fonto Editor should also be hosted on example.com. We do not support Cross Origin Resource Sharing (CORS).

The browser will automatically cause any postMessage requests that are targeting a wrong origin to be discarded. This will cause the request to time out. Not all browsers provide diagnostic messages for these errors. Messages that are being sent to the editor with a wrong origin cause a fatal error and will make the editor stop working.