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. Customize Your Course Pages 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.
