Click here to see it in action.įirst, a script in the child window checks the height of itself, and then sends that height information to the parent window. Every time you ADD or REMOVE a box in the child window, it sends a new message to the parent with the updated height. The parent window is using that information to adjust the height of the iframe. In this example, I'm sending a message from a child window in an iframe to a parent window with the clientHeight of the child's content. Scripts in the parent window can then listen for the message event, and take action based on the data sent.
With postMessage, the embedded iframe site is able to send data to the parent window. We will set it during the mounted lifecycle hook using the window.innerHeight and window.innerWidth properities. Set the initial height/width when the component mounts. Remove the event listener during the destroyed lifecycle hook to stop listening for resize. The window.postMessage() API allows you to send data from one window to another across domains. Add an event listener during the created lifecycle hook to listen for resize. JavaScript API An Office service that supports add-ins to interact with objects in Office client applications. But this problem can be solved by using window.postMessage() to tell the parent what the child's height is, allowing it to adjust the iframe's height attribute with JavaScript. The downside to using iframes is that their height doesn't automatically adjust to the size of the child content. Call a function when the browser window is resized:
Over the years, I've often had to embed interactive data visualizations into other websites.
0 kommentar(er)
