cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 
terryscc
Community Member

Iframe links on mobile app

Hi,

I've recently embedded a HTML file within a Canvas course, using an iframe, and when i try to use it on the mobile app, it opens it in a separate browser. 

The HTML file is part of a tiled layout i have for a course homepage that uses a CSS style sheet to give the tiles shadows and also make tiles tint when a mouse is hovered over them. The links link to other pages in the Canvas course.

Can anyone suggested anything? 

Thanks.

7 Replies
msgarcia
Community Contributor

Where is the original HTML file hosted? Canvas will not allow content from any url that begins with http to be embedded in iframes. Any content that you would like to populate to an iframe should originate from an https based site.

Unfortunately, as you probably know, Canvas does limit what CSS you can implement into the content of a course, you'd could always use inline styles to create buttons similar to the ones that you are talking about, with one exception: you won't be able to add the hover effect as it is a pseudo-selector.

For example, you could do something like this to create a button in the Rich Content Editor:

<a href="#" style="float: left; margin: 30px 0px; -moz-border-radius: 5px; -ms-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; padding: 15px; background: #007aff; color: white; text-align: center; text-decoration: none; -moz-box-shadow: 0px 3px 5px #666666; -ms-box-shadow: 0px 3px 5px #666666; -webkit-box-shadow: 0px 3px 5px #666666; box-shadow: 0px 3px 5px #666666; width: 100px;">Button</a>‍‍‍‍

Which would create the following button, though it does appear that Canvas will remove the box-shadow and border-radius parameters from the inline styles. I think that I have been creating buttons with rounded corners.

Button

The only other way to truly have any control over the CSS is to have admin access. That being said, you can also use distinct Canvas assets that are tied to distinct CSS classes. I would check out the Styleguides for more info on that.

Hi Mark,

The original HTML file is hosted in the files section of the Canvas course. I have been using the iframe so I could use CSS to its fullest potential.

Just seems a shame that the Canvas app doesn't see that I'm linking to another course page.

Thanks. 

msgarcia
Community Contributor

Thank you for the information Terry, now that I better understand the issue, I have a solution for you:

  1. Before you do anything, find out how to enable developer view in your browser of choice. I have a handy guide on how to do this for Verifying Mobile Friendly Web Content‌.
  2. Click on Files in your course navigation menu on the left hand side.
  3. Locate the html file that you would like to use, and click on it so that the preview window opens.
  4. Right click anywhere in on the html file in the preview window and choose Inspect Element.
  5. This will open up your dev console, and you will be able to look at the elements on the page. We are going to be looking for an iframe that is rendering your html file, and it should have a class="ef-file-preview-frame ef-file-preview-frame-html" applied to it.
  6. Find this iframe's src attribute, which should look something like this: /courses/#######/files/##########/file_preview?annotate=0 where the #'s represent unique numeric identifiers for your course and the file's id. Copy the entire src attribute.
  7. Go back to the page that you are creating in Canvas where you are embedding an iframe, and in the HTML editor, paste in the src attribute that you just copied.
  8. Add the following the very beginning of your src attribute: https://INSTITUTION.instructure.com/ where INSTITUTION is replaced with your institution's unique identifier for your Canvas instance.
  9. The iframe's src attribute should now look like this:
    <iframe src="https://INSTITUTION.canvas.com/courses//#######/files/##########/file_preview?annotate=0"></iframe>
  10. Save the page, and you should now be able to see your buttons in their CSS rendered via the iframe in all of their glory in the mobile app. 
  11. Note: You may need to do some inline styles with the iframe to get it to render properly on the page to avoid either horizontal or vertical scrolling. I have also created a blog post for Embedding a YouTube Player with Responsive Aspect Ratio, which can be modified and applied to this situation as well.  

I tested this on my iPhone 7+ using the Canvas mobile app and was able to get it working. Let me know if you have questions or if you have issues.

Hi Mark,

I've tried what you said but it still opens in a separate window with the Canvas sidebar taking up most of the screen space.

Thanks.

msgarcia
Community Contributor

Terry,

If you have the time sometime this week or next, let's try and set up a Zoom conference, and I can see if I can help get this working for you. Direct Message me your details, and we can go from there!

msgarcia
Community Contributor

Terry, I know that I tagged you in the solution that I posted for this, but if there are others who arrive at this specific discussion, I want to point them towards the answer. Just check out https://community.canvaslms.com/groups/designers/blog/2017/06/20/embedding-an-html-page-in-an-iframe....

Robbie_Grant
Community Coach
Community Coach

terryscc,

Were you able to find an answer to your question? I am going to go ahead and mark this question as answered because there hasn't been any more activity in a while so I assume that you have the information that you need. If you still have a question about this or if you have information that you would like to share with the community, by all means, please do come back and leave a comment.  Also, if this question has been answered by one of the previous replies, please feel free to mark that answer as correct.

 

Robbie