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
Fonto XM L 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’.
If the user clicks one of these buttons, FontoXML uses the HTML5 standard
postAPI to send the command to its parent window or frame. See postMessage API documentation for details.
messageis a serialized JSON representation of the message object.
The message object will always contain the following properties:
type: The message type, for example
scope: The scope object that was passed when FontoXML was opened, as specified in the CMS Connector contract.
metadata: An object that may contain command specific properties.
Event Listener('message', callback)
.attach– 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.
Save and close
One of the send-close-signal-to-iframe @ fontoxml-iframe-communication/src/operations.json, the send-close-signal-to-iframe-discarding-changes @ fontoxml-iframe-communication/src/operations.json and the save-and-release-all-locks-and-send-close-signal-to-iframe @ fontoxml-iframe-communication/src/operations.json 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
discard field, which is a
send method on iframecommunicationmanager @ fontoxml-iframe-communication/src/iframecommunicationmanager.js 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
is describing whether a full screen mode is requested. Call this method from an action to be able to use it from an operation.