1let WEBCODE = (function () { 2 3 /** 4 * Adjust the height of an iframe to his content 5 * @param iframeElement 6 */ 7 let adjustHeightToFitContent = function (iframeElement) { 8 let htmlIFrameElement = iframeElement.contentWindow.document.querySelector("html"); 9 let calculatedHeight = htmlIFrameElement.offsetHeight; 10 let defaultHtmlElementHeight = 150; 11 if (calculatedHeight === defaultHtmlElementHeight) { 12 // body and not html because html has a default minimal height of 150 13 calculatedHeight = iframeElement.contentWindow.document.querySelector("body").offsetHeight; 14 // After setting the height, there is a recalculation and the padding of a descendant phrasing content element 15 // may ends up in the html element. The below code corrects that 16 requestAnimationFrame(function () { 17 if (calculatedHeight !== htmlIFrameElement.offsetHeight) { 18 iframeElement.height = htmlIFrameElement.offsetHeight; 19 } 20 }); 21 } 22 iframeElement.height = calculatedHeight; 23 } 24 return {adjustHeightToFitContent: adjustHeightToFitContent} 25})(); 26 27 28window.addEventListener('load', function () { 29 const IframeObserver = new MutationObserver(function (mutationList) { 30 mutationList 31 .filter(mutation => { 32 // in a iframe, you need to test against the browsing content, not 33 // mutation.target instanceof HTMLElement but ... 34 return mutation.target instanceof mutation.target.ownerDocument.defaultView.HTMLElement 35 }) 36 .forEach((mutation) => { 37 let iframe = mutation.target.ownerDocument.defaultView.frameElement; 38 WEBCODE.adjustHeightToFitContent(iframe); 39 }); 40 }) 41 document.querySelectorAll("iframe.webcode-cs").forEach(iframe => { 42 // if height is not set manually 43 const height = iframe.getAttribute('height'); 44 if (height === null) { 45 // Set the height of the iframe to be the height of the internal iframe 46 WEBCODE.adjustHeightToFitContent(iframe); 47 IframeObserver.observe(iframe.contentWindow.document, {attributes: true, childList: true, subtree: true}); 48 } 49 }); 50 51}); 52 53