iFrame: Using the Window.postMessage() Framework

When embedding content in a Syndigo inline-frame widget, there are 2 messages you can send to the parent frame:

• Adjusting Content Height
• Visiting a URL in Parent Frame

Adjusting Content Height

A quick example showing how you might send content height values to the parent frame whenever the content size changes:

const resizeObserver = new ResizeObserver(entries => {
    const body   = document.body;
    const html   = document.documentElement;
        
    const height = Math.max(body.scrollHeight, body.offsetHeight,
                            html.clientHeight, html.scrollHeight, html.offsetHeight);
    window.parent.postMessage(JSON.stringify({
        messageType: 'heightUpdateRequest',
        height
    }), '*');
});

const mainElm = document.querySelector('main');
resizeObserver.observe(mainElm);

assuming your content leverages a standard body HTML element where the content of your page is present, you can copy / paste the above code into the head or top of the body and it will function as expected. If your content does not leverage a standard body HTML element where content is present then you will need to alter the provided example code to support your page.

Visiting a URL in Parent Frame

These only work if your links point at pages on the same site. (can't navigate to a different site)

window.parent.postMessage(JSON.stringify({
    messageType: 'visitLink',
    href: 'CONTENT_URL_HERE'
}), '*');