Embedding an Uploaded HTML page in an iFrame

msgarcia
Community Contributor
37
83315

Challenge

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.

239272_Canvas File Structure.001.png

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:

Pros to embedding an html document in an iframe

  1. You have control over they layout of all of the elements of the file, giving you a greater level of how they are laid out with regards to one another.
  2. You can add a <style> tag to the <head> of your html document, giving you a wider range of options with regards to how the elements look, feel, and even behave on the page. The styles options that are available via this method are wider than inline styles.
  3. If you are brave enough and knowledgable enough, you can actually write javascript or jQuery code that will enable features that would otherwise only be available on the desktop version of Canvas, but are missing in the mobile app versions.

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.

Cons & Complications to embedding an html document in an iframe

  1. Any content that originates from a url that begins with http instead of https will not be allowed to render in your Canvas course. This is a security protection measure.
  2. While the iframe will render the content, depending upon the width of the origin page, the content may render in a way that requires vertical scrolling, horizontal scrolling, or both.
  3. If you don't have access to the origin file (.html) for the iframe, then any links clicked in the iframe will lead to their designated pages, but those pages will render in the iframe itself. This can lead to some very weird/unexpected/non-ideal renderings of pages, from your Canvas course or otherwise, in the iframe itself. 
  4. If the file referenced in the iframe originates from your Canvas course, it will render in a weird sort of way (see item 3) unless you acquire the path to it correctly.

Solution

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.

Video Tutorial

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.

Step-by-step Tutorial

What We Will Need

  1. A .html document. If you would like to borrow one from me, you can find it here.
  2. A text editor so that you can open the .html document and modify the code. I prefer Sublime, but choose the one that you are comfortable with.
  3. A new page in a Canvas to which we will add the iframe.
  4. A basic understanding of the HTML editor in Canvas. If you have embedded YouTube iframes using it, then you are good.
  5. A little bit of free time and patience.

Getting the .html File Ready for Upload

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:

  1. Open the .html file in your text editor.
  2. Make sure that you have added urls for the anchor tags <a> in either your .html file or the one that I provided you with. If you need to know where to put the url, locate the three anchor tags that I have added on lines 134-136 and paste you links over where it reads yourLinkGoesHere. Make sure your link is between the two quotes.
    <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>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍
  3. Locate the closing head tag in your .html file. If you are using my example, it should be around line 131, and it will look like this:
    </head>‍‍‍‍‍‍‍
  4. Place your cursor right before the < of the </head> tag and hit return/enter to add a blank line. In that blank line, add the following code:
    <base target="_parent">‍‍‍‍‍‍‍
    Note: if the code is already there, you may skip step 4.
  5. Go to the Files section of your Canvas course and upload the .html file.

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:

<!DOCTYPE html>
<html>
     <head>
          <!-- Canvas' HEAD content -->
     </head>
     <body>
          <!-- Canvas' BODY content, including our ... -->
          <iframe>
               #document
                    <!DOCTYPE html> <!-- this is actually the start of our .html file -->
                    <html>
                         <head>
                              <!-- The HEAD content from our .html file -->
                         </head>
                         <body>
                              <!-- The BODY content, including the buttons, from our .html -->
                         </body>
                    </html>
          </iframe>
     </body>
</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:

239313_Screen Shot 2017-06-20 at 2.38.27 PM.pngFigure 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.

Creating the <iframe>

  1. First, we need to get the link to our .html file, so click on Files in the Canvas course menu.
  2. Locate the .html file and click on it. This should open up a preview window.
  3. Make sure the developer console is enabled in your browser, right click on any are of the preview window where your file is currently rendered and choose Inspect Element from the list of options. Use my Verifying Mobile Friendly Web Content‌ tutorial if you have forgotten how to access the developer console.
  4. In the source code that appears, you should be able to locate an <iframe> that has the following parameters:
    <iframe allowfullscreen="" title="File Preview" src="/courses/######/files/########/file_preview?annotate=0" class="ef-file-preview-frame ef-file-preview-frame-html" data-reactid=".3.0.0.1.1"></iframe>‍‍‍‍‍‍‍‍‍
    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.
  5. Modify the src="" parameter that you just copied so that it looks like this:
    src="https://INSTITUTION.instructure.com/courses/######/files/########/file_preview?annotate=0"‍‍‍‍‍‍
    Where INSTITUTION is replaced with your specific institution's name for your Canvas instance, and again, the #'s are replaced with the distinct course and file ID's.
  6. Copy the src parameter that you have created. We will be using it soon.
  7. Create a new page in your Canvas course, and, switch from the Rich Content Editor to the HTML Editor by tapping the link in the upper right.
  8. Create an iframe, and include the src parameter you saved, so that it looks like this:
    <iframe src="https://INSTITUTION.instructure.com/courses/######/files/########/file_preview?annotate=0">
    </iframe>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍
    We will now add a few things to the iframe so that it will behave a little nicer when we save it.
  9. Just before the src= parameter add style="width: 100%; height: 300px; overflow hidden" so that you iframe now looks like this:
    <iframe style="width: 100%; height: 300px; overflow: hidden" src="https://INSTITUTION.instructure.com/courses/######/files/########/file_preview?annotate=0">
    </iframe>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍
    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.
  10. Finally, modify the iframe by adding scrolling="no" just before the > of the opening <iframe> tag. Your finalized code should look something like this:
    <iframe style="width: 100%; height: 300px; overflow: hidden" src="https://INSTITUTION.instructure.com/courses/######/files/########/file_preview?annotate=0" scrolling="no">
    </iframe>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍
    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.
  11. Save the page.
  12. You should be good to go! Check your page on both the desktop and mobile versions of Canvas, and click all of your links to ensure that they are opened in the main browser window.

Conclusion

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.

37 Comments
laurakgibbs
Community Champion

Oh, this sounds really nifty, Mark! I will play with this later in the week, and I'm pinging  @keeganlong-whee ‌ and ishar-uw‌ because I am sure they will be interested in this too. Thank you for sharing! I've bookmarked to make sure I will have this at hand when I come romp in my Canvas playground later this week. 🙂

mark_vanorder
Community Participant

Hi Mark,

First, thanks so much for sharing! I'm learning a ton. I tried this process and it comes soooo close to what I'm trying to accomplish. I followed your instructions and it worked as described. The only difference I'd like to accomplish is that the referenced link opens automatically instead of clicking a button first.

I'm trying to make the central section of Announcements open on it's own Canvas Page without the left (and ideally right) side bars. 

When I follow your directions the announcements appear as desired once someone clicks the link. I would like the announcements to just display automagically:) Any possibility this could happen?

All the best,

Mark

Boekenoogen
Community Contributor

Mark Van Order,

Have you tried this program (Announcements Widget for Home Page) We have been using it for some of our courses and it works great. Our only concern is that sooner or later Canvas might deprecate some of the HTML code and it will no longer function. We are looking at other means to see if we can continue to use this widget.

Dr. John Boekenoogen

University of Oklahoma

mark_vanorder
Community Participant

This looks cool. I don't have administrative access to canvas and I think our themes are too locked down for me to play - unfortunately. I will tuck this idea a way.

Thanks so much,

Mark

msgarcia
Community Contributor
Author

 @mark_vanorder ‌, let's find some time to teleconference this week. I want to make sure that I fully understand the issue you are experiencing so that I can help you look for a potential solution. I have followed you, so if you follow me back, we can direct message and set up a meeting time. 

dwillmore
Community Champion

Thank you very much for this in-depth instruction.   I am certain I will put it to use.

mark_vanorder
Community Participant

Hi Mark,

First, thanks so much for your willingness to share your time and expertise! Very Generous!

I am in the Pacific time zone and would be able to talk sometime between 8 - 2 PM on Thursday, Nov 9th. If that doesn't work we could look for a time next week that is good for you. I teach classes in the afternoon.

All the best,

Mark

sbogdani
Community Novice

This tutorial was so helpful! It almost got me there. What I don't understand is, my iframe is set to a width of 100% just like yours. On the individual page in the pages section it looks fine. But, when I put it as the homepage, a bunch gets cut off. Any ideas?

As page

294118_Screenshot page.png

As home

294164_Screenshot homepage.png

themidiman
Community Champion

The home page has additional course functionality in the buttons and calendar side-bar on the right that is constricting the viewport of the iframe. There should be some adjustments to the responsiveness on the iframe if it's to be a home page. Maybe the original post author can make some suggestions. If you could post your iframe source code https: URL that might help someone like me do a bit of troubleshooting. 

sbogdani
Community Novice

In the Canvas box I have

<p><iframe style="width: 100%; height: 800px; overflow: hidden;"  data-api-endpoint="https://canvas.instructure.com/api/v1/courses/1430735/files/70501449" data-api-returntype="File"></iframe></p>

The html code for the image is below, it's an image map so there are a ton of links.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<base target="_parent">
</head>

<body>
<img id="Image-Maps-Com-image-maps-2018-10-23-102531"  border="0" width="960" height="638" orgWidth="960" orgHeight="638" usemap="#image-maps-2018-10-23-102531" alt="" />
<map name="image-maps-2018-10-23-102531" id="ImageMapsCom-image-maps-2018-10-23-102531">
<area alt="" title="" href="https://canvas.instructure.com/courses/1430735/pages/week-one-overview?module_item_id=20134164" shape="rect" coords="1,0,159,150" style="outline:none;" target="_parent" />
<area alt="" title="" href="https://canvas.instructure.com/courses/1430735/pages/welcome-to-photography-for-social-media?module_..." shape="rect" coords="216,201,453,261" style="outline:none;" target="_parent" />
<area alt="" title="" href="https://community.canvaslms.com/community/answers/guides/canvas-guide/getting-started/pages/student" shape="rect" coords="363,424,790,465" style="outline:none;" target="_parent" />
<area alt="" title="" href="https://canvas.instructure.com/courses/1430735/discussion_topics/7092855" shape="rect" coords="190,343,693,384" style="outline:none;" target="_parent" />
<area alt="" title="" href="https://canvas.instructure.com/courses/1430735/pages/week-two-overview?module_item_id=20181456" shape="rect" coords="163,0,320,162" style="outline:none;" target="_parent" />
<area alt="" title="" href="https://canvas.instructure.com/courses/1430735/pages/week-three-overview?module_item_id=20187698" shape="rect" coords="322,0,479,162" style="outline:none;" target="_parent" />
<area alt="" title="" href="https://canvas.instructure.com/courses/1430735/pages/week-four-overview?module_item_id=20201286" shape="rect" coords="483,0,640,162" style="outline:none;" target="_parent" />
<area alt="" title="" href="https://canvas.instructure.com/courses/1430735/pages/week-five-overview?module_item_id=20205436" shape="rect" coords="640,0,797,162" style="outline:none;" target="_parent" />
<area alt="" title="" href="https://canvas.instructure.com/courses/1430735/pages/week-six-overview?module_item_id=20219954" shape="rect" coords="802,4,960,156" style="outline:none;" target="_parent" />
<area alt="" title="" href="https://canvas.instructure.com/courses/1430735/pages/week-seven-overview?module_item_id=20222780" shape="rect" coords="798,160,958,317" style="outline:none;" target="_parent" />
<area alt="" title="" href="https://canvas.instructure.com/courses/1430735/pages/week-eight-overview?module_item_id=20234102" shape="rect" coords="798,321,958,477" style="outline:none;" target="_parent" />
<area alt="" title="" href="https://canvas.instructure.com/courses/1430735/pages/week-nine-overview?module_item_id=20243962" shape="rect" coords="799,476,959,632" style="outline:none;" target="_parent" />
<area alt="" title="" href="https://canvas.instructure.com/courses/1430735/pages/week-ten-overview?module_item_id=20245515" shape="rect" coords="643,479,801,637" style="outline:none;" target="_parent" />
<area alt="" title="" href="https://canvas.instructure.com/courses/1430735/pages/week-eleven-overview?module_item_id=20248722" shape="rect" coords="482,480,637,638" style="outline:none;" target="_parent" />
<area alt="" title="" href="https://canvas.instructure.com/courses/1430735/pages/week-twelve-overview?module_item_id=20264081" shape="rect" coords="326,480,481,638" style="outline:none;" target="_parent" />
<area alt="" title="" href="https://canvas.instructure.com/courses/1430735/pages/week-thirteen-overview?module_item_id=20264541" shape="rect" coords="161,479,316,637" style="outline:none;" target="_parent" />
<area alt="" title="" href="https://canvas.instructure.com/courses/1430735/pages/week-fourteen-overview?module_item_id=20292672" shape="rect" coords="2,479,157,637" style="outline:none;" target="_parent" />
<area alt="" title="" href="https://canvas.instructure.com/courses/1430735/pages/week-15-overview?module_item_id=20295920" shape="rect" coords="0,327,155,485" style="outline:none;" target="_parent" />
<area alt="" title="" href="https://canvas.instructure.com/courses/1430735/pages/week-16-overview?module_item_id=20296219" shape="rect" coords="0,161,155,319" style="outline:none;" target="_parent" />
<area alt="" title="" href="https://www.austincc.edu/help" shape="rect" coords="406,276,789,314" style="outline:none;" target="_parent" />
<area shape="rect" coords="958,636,960,638" alt="Image Map" style="outline:none;" title="Image Map" href="http://www.image-maps.com/index.php?aff=mapped_users_100612" />
</map>
</body>
</html>

themidiman
Community Champion

Thanks for clarifying. You might need to rethink your approach to this. Image maps usually have a fixed size requirements so that the areas and coordinates for the hot spots all work correctly. Therefore they are not responsive to different screen sizes without making use of external JavaScript libraries and jQuery. This would explain why the iframe isn't responding to the need to shrink down to make room for the Canvas buttons on the right. 

msgarcia
Community Contributor
Author

Quick question  @sbogdani ‌, the content that you are trying to place in the iframe, does it have a set width? When you hover over the iframe and tap the right arrow, does it scroll right? If you have a fixed width for your content (ie 1000px) that goes into the iframe, rather than flexible content (width based percentages) then even if you have the iframe set to 100%, that content will go outside the bounds (overflow) of the iframe if the width of html container for the iframe is less than the interior content's width. Below I have done an example of what this might be like:

<page in canvas>

   <iframe width="100%" ></iframe>

</page in canvas>

If the page in canvas >= yourfile.html width then you will see all content (as you do in your first photo).

If the page in canvas < yourfile.html width then some of the content will be cut off (second photo).

Essentially, the iframe is setting itself to 100% won't solve the overflow issue if its parent container (the canvas page) has a width that is less than that of the file that you put in the iframe.

sbogdani
Community Novice

I think it has to have a fixed width because it's an image map. But maybe I can just resize the image to fit that homepage window. 

msgarcia
Community Contributor
Author

Gotcha. Well, if you feel adventurous, there are a few other ways that you could choose to lay your page out, though it will require some modifications to the html and css.

Look into flex box formats (A Complete Guide to Flexbox | CSS-Tricks ) and bootstrap (http://getbootstrap.com). Both of these options do require a bit more knowledge of how HTML and CSS work together, but, once you get comfortable with them, they are really useful tools and can add a lot of versatility to web content layout.

sbogdani
Community Novice

Update! I got to work! I shrunk the original image to a width of 740 and then I was still having trouble with the files, so I followed this tutorial which magically worked. 

I know you said in your video that when you go into the source code and find that iframe src code that that isn't the permanent code. The first time I tried it it worked but then afterward that code was different than in your tutorial and I couldn't get it to work. I deleted it and reuploaded and had the same issue. In the other tutorial, you post the html as a file in a course module and grab the code from there. I wonder if this gives the image a more permanent location and if that was where my later problems were coming from?

Anyway, I just wanted to update in case anyone is trying to do the same thing. 

Thank you so much for your help!!!

sbogdani
Community Novice

And yes, I haven't used Flexbox at all, but next time I'll delve in and try and figure that out. Thanks again! 

Bobby2
Community Champion

Great points msgarcia

I'm sure people in my team would like to know about this too.  @alannah_roach ,  @isobel_williams ,  @scott_maccrum ,  @rachael_donalds ,  @kate_spencer ,  @stephanie_koshi ,  @linda_powell .

msgarcia
Community Contributor
Author

Stephanie, have you checked the mobile app to make sure that it renders properly there. 740 may push it outside of the usable bounds in the mobile viewports. If it works, please let me know because that would be good news for others I am sure.

sbogdani
Community Novice

I don't think I can look because I have a free Canvas account, I'm learning how to use it. If anyone wants, you can message me and I'll add you to the course.

lilianedias
Community Novice

Hi mark!

I inserted an HTML page and an image into Files on Canvas. HTML has a mapped image. I created a page on Canvas and inserted the HTML page using iframe. However, in APP, the image does not appear. Can you help me please.

_______________________________________________________________________________________________

HTML code:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Página inicial</title>
</head>
<body>
<div style="text-align: center">
<img class="broken-image" src="https://pucminas.instructure.com/files/209527/download?download_frd=1" alt="" width="611" height="611" usemap="#Map"/>
<map name="Map">
<area shape="rect" coords="251,44,362,89" href="https://pucminas.instructure.com/courses/1405/pages/ciencia-e-conhecimento" target="_parent">
<area shape="rect" coords="380,76,479,125" href="https://pucminas.instructure.com/courses/1405/pages/demarcacao-cientifica-2" target="_parent">
<area shape="rect" coords="461,164,568,208" href="https://pucminas.instructure.com/courses/1405/pages/tipos-de-conhecimento-2" target="_parent">
<area shape="rect" coords="494,271,593,344" href="https://pucminas.instructure.com/courses/1405/pages/objetos-de-pesquisa-em-psicologia" target="_parent">
<area shape="rect" coords="463,394,562,462" href="https://pucminas.instructure.com/courses/1405/pages/pesquisa-qualitativa-e-seus-tipos" target="_parent">
<area shape="rect" coords="377,488,473,536" href="https://pucminas.instructure.com/courses/1405/pages/etica-na-pesquisa" target="_parent">
<area shape="rect" coords="250,514,358,577" href="https://pucminas.instructure.com/courses/1405/pages/a-construcao-de-projetos-de-pesquisa-e-seus-comp..." target="_parent">
<area shape="rect" coords="134,476,232,546" href="https://pucminas.instructure.com/courses/1405/pages/pesquisa-bibliografica-e-referencial-teorico" target="_parent">
<area shape="rect" coords="50,396,142,459" href="https://pucminas.instructure.com/courses/1405/pages/estrategias-de-coleta-de-dados" target="_parent">
<area shape="rect" coords="7,268,119,348" href="https://pucminas.instructure.com/courses/1405/pages/metodos-de-analise-definicao-e-uso-de-categorias..." target="_parent">
<area shape="rect" coords="48,166,146,216" href="https://pucminas.instructure.com/courses/1405/pages/analise-de-conteudo" target="_parent">
<area shape="rect" coords="133,72,242,126" href="https://pucminas.instructure.com/courses/1405/pages/relatorios-e-publicacoes" target="_parent">
</map>
</div>
</body>
</html>

_______________________________________________________________________________________________
iframe cod:

<div style="overflow: hidden; max-width: 100%;"><a target="_parent"> <iframe src="https://pucminas.instructure.com/courses/1405/files/220873/download" width="100%" height="631px" data-api-endpoint="https://pucminas.instructure.com/api/v1/courses/1405/files/220873" data-api-returntype="File"></iframe></a></div>

Thank's!

Stay on the mobile:

298832_Screenshot_20181129-084419.png

mark_vanorder
Community Participant

My guess is that the app doesn't like the image size. I would try cutting the image size way down as an experiment. If that doesn't work you might try converting the image to a different format.

-Mark

lilianedias
Community Novice

Hi, Mark!
I decrease the size of the image by placing a fixed value and also with percentage and even then the image does not appear in the app.
I already tested with png and jpg images.
Thank you for your support.

lilianedias
Community Novice

Hi!

Problem solved.
ID was missing from: <map name="Map" id="#Map">

_________________________________________________________________

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Menu</title>
</head>
<body>
<div style="text-align: center">
<img src="https://pucminas.instructure.com/courses/1405/files/220907/download?download_frd=1" width="611" height="611" usemap="#Map" border="0"/>
<map name="Map" id="#Map">
<area shape="rect" coords="251,44,362,89" href="https://pucminas.instructure.com/courses/1405/pages/ciencia-e-conhecimento" target="_parent">
<area shape="rect" coords="380,76,479,125" href="https://pucminas.instructure.com/courses/1405/pages/demarcacao-cientifica-2" target="_parent">
<area shape="rect" coords="461,164,568,208" href="https://pucminas.instructure.com/courses/1405/pages/tipos-de-conhecimento-2" target="_parent">
<area shape="rect" coords="494,271,593,344" href="https://pucminas.instructure.com/courses/1405/pages/objetos-de-pesquisa-em-psicologia" target="_parent">
<area shape="rect" coords="463,394,562,462" href="https://pucminas.instructure.com/courses/1405/pages/pesquisa-qualitativa-e-seus-tipos" target="_parent">
<area shape="rect" coords="377,488,473,536" href="https://pucminas.instructure.com/courses/1405/pages/etica-na-pesquisa" target="_parent">
<area shape="rect" coords="250,514,358,577" href="https://pucminas.instructure.com/courses/1405/pages/a-construcao-de-projetos-de-pesquisa-e-seus-comp..." target="_parent">
<area shape="rect" coords="134,476,232,546" href="https://pucminas.instructure.com/courses/1405/pages/pesquisa-bibliografica-e-referencial-teorico" target="_parent">
<area shape="rect" coords="50,396,142,459" href="https://pucminas.instructure.com/courses/1405/pages/estrategias-de-coleta-de-dados" target="_parent">
<area shape="rect" coords="7,268,119,348" href="https://pucminas.instructure.com/courses/1405/pages/metodos-de-analise-definicao-e-uso-de-categorias..." target="_parent">
<area shape="rect" coords="48,166,146,216" href="https://pucminas.instructure.com/courses/1405/pages/analise-de-conteudo" target="_parent">
<area shape="rect" coords="133,72,242,126" href="https://pucminas.instructure.com/courses/1405/pages/relatorios-e-publicacoes" target="_parent">
</map>
</div>
</body>
</html>

jblumberg
Community Contributor

Thanks for posting a well laid explanation.

I have utilized this for a few projects. 

From any html iframed from the file section of a course, that html can access other files in the same directory as the file.  This lets you import css and js files to use with the html file.  Just import these with their names as relative links.

I did run into an issue, you cannot import from other folders in the files section (including sub-folders).  It only works from the same folder as the html file that you use as the source for the iframe.

lph
Community Champion

Hi

After a hair-pulling few moments, it became clear to me that scrolling is stripped if you try to edit in the rich text editor. Add the scrolling statement in the HTML editor then save from there. Don't flip back to the rich text editor or scrolling is stripped out. 

Draco
Community Explorer

Hi, I'm coming from blackboard where I have a number of javascript toys for students to play with and have bottomless practice with vectors, sig figs etc. I tried this and it has worked! However, there is a weird encoding issue. Upon preview in files, and on the page, characters are inserted. There are no special characters in the script at all, and when I inspect the element, it shows them there as well. I've attached screenshots of the page and preview, resp. The weirdness happens just above 'Click Me...'. Do you have any thoughts on this? Thank you!

Screenshot from 2020-11-19 23-19-33.pngScreenshot from 2020-11-19 23-18-56.png

cjaymarshall
Community Member

When I try embedding an HTML file in an iframe as you have shown the scrolling="no" attribute is still stripped (save from HTML editor as suggested) and the <base target="_parent"> statement in the head of the html code seems to be ignored.  Does my ability to do this depend on the canvas version we are using (we have the free version) or do I need any additional privileges to do this?  I really want to take advantage of being able to insert code styled the way I want it to be styled and your approach seem pretty straightforward.  Thanks for any help!

marchermon
Community Explorer

Does this not work anymore? I completely understand everything here but I never can get just the html file to be embedded. It's always the canvas page embedded within the canvas page. I'm thinking that there has been a change in Canvas that doesn't let this work as expected anymore?

cla_user
Community Member

Also doesn't work for me. Can someone help?

ddessauer
Community Participant

One of the topics I actually teach is UI design, so being able to demonstrate functional interactions, beyond the little Canvas permits, right there inline seamlessly in your Canvas page is tremendously important to the student experience.

To do this, I have been using iFrame content quite extensively within my module pages, both to bring in externally hosted 3rd party pages, and to display my own custom HTML saved to files in a very similar way to what msgarcia kindly demonstrated & documented here. 

If cla_user wants to post more detail on what is happening I may be able to assist. 

The reason I'm posting in this thread is that I had a problem I don't see documented here, so I thought it might be worth explaining the issue & the solution I arrived at:

 

My units get 'rolled over' each time I deliver them to a new intake of students. That is to say, a duplicate of the previous instance is created as a new canvas course.

When units get duplicated like this (and I'm sure the same is true for content imported from Canvas Commons) all the internal links (because they are not relative but absolute) get updated to the new Canvas Course number. For example:

https://your_institution.instructure.com/courses/49999/files/23182163 

might become:

https://your_institution.instructure.com/courses/50000/files/23182163 

However, if there are non-relative links like these within your HTML code, these will not get updated. It is now linking to the old instance of your unit. This is a trap because you have access to both, the problem is not visible unless you switch to 'student view'.

So you need to be mindful of this if your HTML has any external content to it, like image file, external CSS, Java Script ... anything else you are having to also upload to files to support the HTML page, including other linked HTML pages.

I did not want to have to update every link in every page of custom code every time a course rolled over (that's no way to live!).

 

I did see somewhere (apologies to the author I can't see the post now) that someone was successful in creating relative links by having all the related files within a single folder in their course files storage. When I was tackling this problem I did not discover this solution, but I would anticipate that would solve the problem (?).

The solution I implemented (and is still working five years later) is that created a free website online just to house my linked content so all these links remain static. So the HTML files are in my course files storage, but all the images they link to are on a different publicly accessible domain.

You might wonder why I don't have the HTML hosted externally too. The reason is budget. I am not paying anything to host the content online. Most free serves watermark pages with footer text and links or something. By just sucking in the images and script files I need, I circumvent that. Yes, I'm that cheap, but it makes for a clean wrapper to the iframe content.

 

SamOHanlon
Instructure
Instructure

Hi, @cla_user!

See if this will work for you. In the instructions above, it says your final iframe code on the Canvas page should look like this:

<iframe style="width: 100%; height: 300px; overflow: hidden" src="https://INSTITUTION.instructure.com/courses/######/files/########/file_preview?annotate=0 " scrolling="no"></iframe>

Remove the overflow and scrolling attributes. Replace file_preview?annotate=0 with download. So now, it looks like this:

<iframe style="width: 100%; height: 300px;  src="https://INSTITUTION.instructure.com/courses/######/files/########/download"></iframe>

Does this solve your problem?

RichC
Community Participant

This had been the post I was looking for as it was doing exactly what I wanted but I think the RCE/Canvas has been updated and the above no longer works. (at least for me)

I edit the html to this:
<iframe src="https://tds.instructure.com/courses/336/files/21160/file_preview?annotate=0" width="100%px" height="600px"></iframe>

When I return to the editor view, the iframe is displaying the html page correctly BUT when I save the page and it reloads, the html page is now displaying a page within a page.

 

If I go back to the html editor, Canvas has automatically updated the code to this:

<iframe src="https://tds.instructure.com/courses/336/files/21160" width="100%px" height="600px" data-api-endpoint="https://tds.instructure.com/api/v1/courses/336/files/21160" data-api-returntype="File"></iframe>

 

Canvas seems to be stripping this section out: /file_preview?annotate=0

 

Have anyone found a workaround for this problem?

ddessauer
Community Participant

Hello @RichC 

Try replacing your line above with this code:

<p><iframe src="https://tds.instructure.com/courses/336/files/21160/download" width="100%" height="600" </iframe></p>

when you save that, it will also cause Instructure Canvas to update your code, extending it to read:

<p><iframe src="https://tds.instructure.com/courses/336/files/21160/download" width="100%" height="600" data-api-endpoint="https://tds.instructure.com/courses/336/files/21160" data-api-returntype="File"></iframe></p> 

... but it should display the way you anticipate (I hope). Obviously, you can edit the width and height attributes to suit your content. Height (unfortunately) needs to be in a fixed pixel size. Width can be fixed or % based. I don't think it should ever be both as Canvas has edited yours to read:

width="100%px"

RichC
Community Participant

Yes that's awesome, it worked perfectly! That has saved me a lot of trouble trying to work out an alternative route.  Thanks for the help @ddessauer 

ddessauer
Community Participant

🤗 so glad to hear it helped @RichC . 

JustinShewell1
Community Novice

I am embedding HTML files that include images, and some of the images are fairly large, so they take a while to load. Normally the images would be saved in a person's cache, and so they would load much faster the next time. However, I have noticed that when I load the Canvas page with the embedded iframe in it, it reloads the images from scratch each time. Is there a way to override that setting? (I am looking into how to reduce the image size, but in the meantime, I need to enable caching of images).

RichC
Community Participant

@JustinShewell1 I'll let others help with your cache issue but to compress your images without losing quality check out the website TinyPNG