diff --git a/lms/templates/courseware/courseware-chromeless.html b/lms/templates/courseware/courseware-chromeless.html index 466b99bfe132587e694992d3716837db0b30586c..0abee7697e0f3abdacb0992bc8ae88f346c1c0e2 100644 --- a/lms/templates/courseware/courseware-chromeless.html +++ b/lms/templates/courseware/courseware-chromeless.html @@ -50,13 +50,12 @@ ${static.get_page_title_breadcrumbs(course_name())} // If this chromeless view is in an iframe in the learning microfrontend app // then add a base tag in the head (of the iframe document) to force links // in this iframe to navigate the parent window. - if (window !== window.parent) { - var learningAppReferrer = "${settings.LEARNING_MICROFRONTEND_URL | n, js_escaped_string}"; - if (document.referrer === learningAppReferrer) { - var baseElement = document.createElement('base'); - baseElement.setAttribute('target', '_parent'); - document.head.appendChild(baseElement); - } + var learningAppUrl = "${settings.LEARNING_MICROFRONTEND_URL | n, js_escaped_string}"; + var parentIsLearningApp = document.referrer.indexOf(learningAppUrl) === 0; + if (window !== window.parent && parentIsLearningApp) { + var baseElement = document.createElement('base'); + baseElement.setAttribute('target', '_parent'); + document.head.appendChild(baseElement); } </script> </%block> @@ -112,44 +111,43 @@ ${HTML(fragment.foot_html())} // If this view is rendered in an iframe within the learning microfrontend app // it will report the height of its contents to the parent window when the // document loads, window resizes, or DOM mutates. - if (window !== window.parent) { - var learningAppReferrer = "${settings.LEARNING_MICROFRONTEND_URL | n, js_escaped_string}"; - if (document.referrer === learningAppReferrer) { - - var lastHeight = window.offsetHeight; - var lastWidth = window.offsetWidth; - var contentElement = document.getElementById('content'); - - function dispatchResizeMessage() { - var newHeight = contentElement.offsetHeight; - var newWidth = contentElement.offsetWidth; - - if (newWidth === lastWidth && newHeight === lastHeight) { - return; - } - - window.parent.postMessage({ - type: 'plugin.resize', - payload: { - width: newWidth, - height: newHeight, - } - }, document.referrer - ); - - lastHeight = newHeight; - lastWidth = newWidth; - } + var learningAppUrl = "${settings.LEARNING_MICROFRONTEND_URL | n, js_escaped_string}"; + var parentIsLearningApp = document.referrer.indexOf(learningAppUrl) === 0; - // Create an observer instance linked to the callback function - const observer = new MutationObserver(dispatchResizeMessage); + if (window !== window.parent && parentIsLearningApp) { + var lastHeight = window.offsetHeight; + var lastWidth = window.offsetWidth; + var contentElement = document.getElementById('content'); - // Start observing the target node for configured mutations - observer.observe(document.body, { attributes: true, childList: true, subtree: true }); + function dispatchResizeMessage() { + var newHeight = contentElement.offsetHeight; + var newWidth = contentElement.offsetWidth; + + if (newWidth === lastWidth && newHeight === lastHeight) { + return; + } - window.addEventListener('load', dispatchResizeMessage); - window.addEventListener('resize', dispatchResizeMessage); + window.parent.postMessage({ + type: 'plugin.resize', + payload: { + width: newWidth, + height: newHeight, + } + }, document.referrer + ); + + lastHeight = newHeight; + lastWidth = newWidth; } + + // Create an observer instance linked to the callback function + const observer = new MutationObserver(dispatchResizeMessage); + + // Start observing the target node for configured mutations + observer.observe(document.body, { attributes: true, childList: true, subtree: true }); + + window.addEventListener('load', dispatchResizeMessage); + window.addEventListener('resize', dispatchResizeMessage); } }()); </script>