Adding a full page iframe to a custom page
Here's how to add a full page iframe to a custom page. The benefit of this is that you can include any remote webpage you like into a custom page inside your course.
Note that your remote page URL will still be visible in the page code, and a determined individual could still determine where your remote page is.
Edit the course you want to add your iframe to
Go to Step 4. Pages & Templates and pick the page you want to add the iframe to. (Most people people do this on a custom page, but in fact you can do this on any page of your course.
Remove all existing blocks from your page, and add a HTML/JS block from the Advanced block category. Just drag it over onto the page
Edit the block and add the following code to it:
<!DOCTYPE html> <html> <body> <div id="container"> <iframe id="myIframe" src="YOUR_REMOTE_PAGE_URL_HERE"></iframe> </div> <style> .page-wrapper .relative.px-8 { padding: 0; } .page-wrapper .max-w-7xl.mx-auto { max-width: unset; } </style> <script> // Get references to the container and iframe elements var container = document.getElementById("container"); var iframe = document.getElementById("myIframe"); // Set styles for container container.style.width = "100vw"; container.style.height = "100vh"; // Set styles for iframe iframe.style.width = "100%"; iframe.style.height = "100%"; iframe.style.border = "none"; // Adjust iframe height when a message is received from the iframe window.addEventListener("message", function(event) { if (event.data && event.data.iframeHeight) { iframe.style.height = event.data.iframeHeight + "px"; } } ); </script> </body> </html>Replace "YOUR_REMOTE_PAGE_URL_HERE" in the code above with your remote page address.