cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 
michael5
Community Contributor

How to integrate an uploaded HTML file through an iframe?

Jump to solution

Hello,

For one of our courses I've made a sound-button using HMTL, CSS and JS. It works fine but I've been having some trouble integrating it through an iframe into the actual course quizzes. First, I tried using our private webhosting service which provides a direct link to the HTML file that I am trying to show. Nothing appeared inside the iframe when I did this and I'm not sure why, but this does not appear to be a problem isolated to Canvas LMS.

Following this, I tried uploading the HTML file directly to the course files and was now able to include the sound-button in any given quiz but only as a hyperlink that would open a new browser page with the functional sound button on it.

Finally, I opened the sound-button hyperlink and copied the URL from there and finally made it work in an iframe in the course quiz that I was working on. However, the file URL is extremely long and it's a quite tedious process to do this everytime I need to put the sound-button in.

Is there an easier way to get a custom .html file to load in an iframe in a course quiz?

Thanks in advance,

Michael

1 Solution
Stef_retired
Community Team
Community Team

Hello,  @michael5 , what an interesting use case you've presented! From your description it looks like you've addressed the relatively well-known solutions, and the third one--encasing the HTML in an iframe--is typically the one upon which most people land. I've never tried this, but I wonder if using a link shortener such as bit.ly or goo.gl would make the process less tedious.

I'll share your question with the Instructional Designers​ group to see if they can come up with something that is a bit more elegant and a bit less time consuming.

Also, I was surprised to hear that the first solution didn't work. In theory, it sounds like it should, and it's useful to know that its failure is not limited to the Canvas LMS. I assume that the URL to the HTML file that resides on the private webhosting service starts with https://, but I wanted to throw that out there just to be sure.

View solution in original post

6 Replies
Stef_retired
Community Team
Community Team

Hello,  @michael5 , what an interesting use case you've presented! From your description it looks like you've addressed the relatively well-known solutions, and the third one--encasing the HTML in an iframe--is typically the one upon which most people land. I've never tried this, but I wonder if using a link shortener such as bit.ly or goo.gl would make the process less tedious.

I'll share your question with the Instructional Designers​ group to see if they can come up with something that is a bit more elegant and a bit less time consuming.

Also, I was surprised to hear that the first solution didn't work. In theory, it sounds like it should, and it's useful to know that its failure is not limited to the Canvas LMS. I assume that the URL to the HTML file that resides on the private webhosting service starts with https://, but I wanted to throw that out there just to be sure.

michael5
Community Contributor

Thanks for the fast response - from what you wrote I managed to find out why it's happening but not a solution. I opened the Chrome console and it appears the content in the iframe is being blocked by Chrome with the error message "... [URL] must be served over HTTPS.". So that's the problem - I've yet to find a solution but I suppose I will have to talk with the webhosting service, but any suggestions for easier fixes are welcome. 🙂

michael5
Community Contributor

Also, as a side-note, this explains why it's working when I divine the uploaded file link from Canvas because Canvas file hosting uses HTTPS. So it can work as a work-around but I'll have to get it changed on our own server.

 @michael5 ​, I'm glad to hear that we're back on track with Solution #1! Increasingly, webhosting services are willing to provide an https:// connection, so the pathway to getting this fixed might be simpler than you think. Also, the webhosting service might actually already be supporting https:// ; just add an "s" to the URL and see if it works. It often works for me.

SethBattis
Community Contributor

Here's a shout-out for LetsEncrypt.org -- relatively user-friendly free SSL certificates for web sites. There's some debate within IT about whether or not we would feel good about using a LetsEncrypt cert for an ecommerce site, but it's practically ideal for securing an HTTPS connection to a generic webserver!

Good call,  @SethBattis ​.  These days there really isn't a good reason for normal sites not to have SSL certificates (besides what you mentioned about ecommerce, I suppose).