Difference between revisions of "Iframe"

From Carleton Moodle Docs

(Example use)
Line 36: Line 36:
[[Category:Editing text]]
[[Category:Editing text]]
[[Category: Delete?]]

Revision as of 10:03, 5 July 2017

IFrame (Inline Frame) is piece of HTML code that creates a frame or window within an HTML page to display content from another URL.

In Moodle, it is a good way to display content such as:

  • calendars from external sites such as Google calendar, Microsoft Outlook web calendars, Apple Mobileme calendars etc.
  • web pages with current content: e.g. weather
  • content from network locations outside the current Moodle course e.g. another Moodle course, a network file of html page
  • content from sites which deliver content through iFrames such as Google Picasa web albums, youtube etc.

NOTE: Screen widths are often 1200 pixels wide so an iFrame up to 1000 pixels is often fine.

The size of the IFrame can be specified in the surrounding HTML page, so that the surrounding page can already be presented in the browser while the IFrame is still being loaded. The IFrame behaves much like an inline image and the user can scroll it out of view. On the other hand, the IFrame can contain its own scroll bar, independent of the surrounding page's scroll bar.

For security reasons, moodle just does not allow you to use iframes everywhere. In general, iframe code is not allowed in Moodle activities to which all class members can contribute, including Assignment submissions, Wiki, Forum, Database, Glossary, and Blog activities. In these activities iframe-embedded video displays in the HTML editor, but will be stripped out when posts or submissions are saved.

Caution: not all browsers recognize IFrame. However, Mozilla Firefox, Opera and Microsoft Internet Explorer introduced contentEditable and designMode, which enables users to edit the contents of the HTML contained in an IFrame. Popular web applications which make use of this feature including Google Docs & Spreadsheets (formerly Writely), JotSpot Live, and Windows Live Hotmail to name a few.

Code example

To create an iframe,

  • edit a section header, label, web page or forum post
  • turn on the HTML code display
  • paste the following code somwhere
<iframe height="600" width="900" src=""> Your browser does not diplay iFrames</iframe>

The following example creates a scrollable window 300 by 600 pixtels and opens up Adobe Reader and the file inside it.

<iframe height="300" width="600" src=" /WQ3.pdf"> Alternative text for browsers that do not understand IFrames </iframe>

See also