Dynamically Resizing the Iframe Height

Dynamically Resizing the Iframe Height

In order for the Search! page to to blend in with the integrating page, the height of the iframe must be such that it shows all content while not introducing extra white space. Because the height of the Search! page changes with the number of results displayed, the height of the iframe must be adjusted dynamically.

Two javascript libraries ^[1] are responsible for adjusting the height of the iframe:

• iframeResizer.min.js: must be loaded on the integration page.
• iframeResizer.contentWindow.min.js: is loaded on the Search! page.

The script running in Search! periodically passes on information of its height to the integrating page which will then update the height of the iframe automatically. The scripts use the window.postMessage API for the communication across different URL domains.

Additionally, after loading initial set of results, Search will send message 'check-scrolling-availability' to the host page, so that it can verify if there is enough content in viewport to make loading of next set of results work. For reference implementation, check example