Previously, I was attempting to help terryscc with an issue related to iframe content not rendering properly in Canvas and the Canvas mobile app. To see our initial discourse, checkout Iframe links on mobile app. From these communications, I gathered information related to the issue, and I think that I have devised a solution for it. Before I get too far into it however, I wanted to first details what we are attempting to do here and why we are attempting to do it.
Figure 1. We are attempting to upload a .html file and then embed it into an iframe on a page.
Rather than creating a simply link or anchor tag to the file, we are attempting to embed it in a page of the Canvas course. Why would we want to do this? Well there are a couple of advantages that come with embedding an HTML file including:
While this may seem like a favorable option, before we begin, I must point out that there can be some unforeseen complications that arise when attempting to put any content into an iframe.
I have created a simple solution to demonstrate the possibilities when the four complications are addressed appropriately. If you are more comfortable with HTML and CSS, then feel to take the information here and run with it to your heart's content. If you aren't so familiar with HTML and CSS, never fear. I will provide you with all of the materials so that you can at least play around with this and maybe learn a thing or two.
If you would like to watch a video of me talking through this, it is directly below. If you instead prefer to follow along on the page, then simply skip the video for now.
Before we upload it, there are a couple of things that we want to make sure of when it comes to our .html file. I have detailed them below:
<a class="button is-1" href="yourLinkGoesHere">Go to Page</a>
<a class="button is-2" href="yourLinkGoesHere">Go to Syllabus</a>
<a class="button is-3" href="yourLinkGoesHere">Go to Modules</a>
Note: if the code is already there, you may skip step 4.
Before we proceed, I want to talk about the importance of step 4. When we go to embed our .html document into our Canvas page, what we will really be doing is placing our document inside of an <iframe> element which is, itself, inside of another .html document. Essentially we are performing the Inception of web design. Essentially, when the page is fully loaded the code is going to look something like this:
<!-- Canvas' HEAD content -->
<!-- Canvas' BODY content, including our ... -->
<!DOCTYPE html> <!-- this is actually the start of our .html file -->
<!-- The HEAD content from our .html file -->
<!-- The BODY content, including the buttons, from our .html -->
Why does this matter?
Well, the problem that can arise is that if the iframe is rendering a separate html document from the Canvas one that the browser you are using is rendering, then any links that exist, and are clicked, within the iframe html document will only open new tabs and windows within the iframe's document. To correct this behavior, we introduce the <base> parameter in the head. This sets a base behavior for all clicked links originating from our .html file. The target="_parent" piece of the base code essentially says, "when a link is clicked, the base behavior is to open that link in the parent window." Had we not done this, we would expect to have aberrant behavior on link clicks, where windows would load inside of windows, and you would most likely get something that looks like this:
Figure 2. When a page in your Canvas course becomes Inception.
Notice how both the global nav and the course nav are still rendered in my iframe. That is not the behavior that I want, and this is the behavior that the <base> parameter corrects.
Where the #'s in the src="" parameter will represent your unique course id number and the unique number associated with the file. Copy the src="" parameter.
<iframe allowfullscreen="" title="File Preview" src="/courses/######/files/########/file_preview?annotate=0" class="ef-file-preview-frame ef-file-preview-frame-html" data-reactid=".126.96.36.199.1"></iframe>
We will now add a few things to the iframe so that it will behave a little nicer when we save it.
By setting the width to 100%, the iframe will behave in a responsive manner, always growing or shrinking to fill whatever space is actually allotted to it. You may need to experiment with the height, depending upon how tall your container will be. If you have a lot of buttons and text, you will need to increase the height parameter until everything is visible (you will see the cutoff if you didn't make your iframe tall enough). The overflow parameter is a personal preference on my part. I choose to make my iframes tall enough so that all of their content is visible with needing to scroll within them. If you don't set your overflow, you may find that you, or your students, have to scroll either horizontally or vertically within the iframe to see all of its content. This will involve scrolling ON TOP of the scrolling that is already happening in the main window as a result of Canvas' html.
<iframe style="width: 100%; height: 300px; overflow: hidden" src="https://INSTITUTION.instructure.com/courses/######/files/########/file_preview?annotate=0">
This scrolling parameter is a fallback for the overflow style that we added in step 9, and ensures that there is no scrolling allowed in the iframe. Again, this is a personal preference, but you are welcome to not utilize this if you feel it is unnecessary.
<iframe style="width: 100%; height: 300px; overflow: hidden" src="https://INSTITUTION.instructure.com/courses/######/files/########/file_preview?annotate=0" scrolling="no">
As you can see, this opens the door for instructional designers and instructors to build out content that is not based solely on inline css styles or the stylesheets provided by Instructure. I am excited to see what you all choose to do with this information, and as always, please feel free to contact me if you have questions or concerns about getting this up and running.
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
I'm a Texan, born and raised, though I spent all of my years in college and graduate school in the northeast. I attended MIT, where I obtained a BS in Biology, and then received a MS in Cell and Molecular Biology from UPenn. After leaving the northeast, I moved back to the Dallas area to be a bit closer to my family, and landed a job at Collin College. Initially, I was lab staff, and prepped and taught biology labs. I recognized early on in during my tenure that students across our campuses needed a consistent lab experience. To address this, I set to work filming video lectures and reviews and posting them to YouTube. The problem then was disseminating the information to students, and not just those in my classes. To develop a central repository of these videos, and other content, I taught myself to code in HTML and CSS. Over the last eight years, I have worked to better my understanding of web and graphic design. Along the way, I have picked up additional skills that have helped me to achieve this. Now, as I work on new strategic initiatives and projects, I do so with very distinct objectives: create functional, student facing assets, AND, ensure that those assets are clean, concise and well designed.