Iframe Resize Demo

Challenges "Fake Store" Presents:

Origin differs from main site, preventing JavaScript from the main window from accessing the window object contained in the <iframe>.
Site is hosted for free on Heroku so initial load often delayed by several seconds.
All data is loaded through a fetch request, then most of the HTML is generated dynamically through a script.
When selecting a product at the bottom of the list of all products, the <iframe> may change but the viewport location does not, by default, stay focused on the <iframe>.

Origin differs from main site, preventing JavaScript from the main window from accessing the window object contained in the <iframe>.
<img> tags are generated dynamically for each <li> tag, and assigned a random image URL. <li> tags don't have a size so the element has a height value of 0 until the image is loaded.
Navigation results in changing pages, thus changing the currently running script.

Footer and main content are spread apart using the flexbox "space-between" style to insure the footer is always at the bottom of the page regardless of window size. Because of this when you increase the size of the board, then decrease it, you can't simply find the size of the body element to resize the <iframe> correctly. The <iframe> resizer always finds the most compact height possible to display all of the content.