On websites, iframes (or Inline Frames) are a like a mini window within a page that can load up another document (e.g. an external website or web object). They can be useful to embed objects or other pages to save the user opening another window, or if you want to integrate the content into your own page seamlessly.
So for example, here is the HTML code to create an iframe—in this case to load up the Google homepage within the frame:
<iframe src="http://www.google.com" width="100%" height="350"></iframe>
When pasted into the HTML of the Page Editor, the resulting Ultranet page would look like the following:
As you can see, the Google page fits within that frame area, and you can use it as if you were browsing to it within a separate browser window or tab. But instead, it's right there within your Ultranet page!
The basic iframe code and how to modify it
So, let's look at the code itself and how to manipulate it. Once again, here is some sample HTML code for an iframe:
<iframe src="http://" width="100%" height="400"></iframe>
The core parameters within the iframe tag are:
- The src (a.k.a. 'source', or the URL of the document/object to be loaded within the iframe),
- The width and height of the frame (either specifed as a percentage of the page, or in pixels).
It's fairly common in most uses to leave the width as "100%", so you really only need to edit the source and height parameters. The source needs to be a full and properly functional and accessible URL (e.g. to another website, or to a web-friendly document uploaded within Ultranet). For the height, it really depends on the source—if it's tall, increase the height value. If it isn't, or you don't want a long frame, reduce the value (note that scrollbars will render within the iframe anyway if the content is too wide/tall to fit).
Once you've got it formatted the way you want, simply paste in the finished code into the HTML of the Page Content where you want the iframe to load (if you need a refresher on how to do this, read the "Inserting and editing in HTML mode" section of this tutorial).
Additional advanced iframe parameters
In addition to the basic src, width and height parameters described above, you can also use the following parameters to further style/customise your iframe:
- frameborder - this specifies if there is a border around your frame or not. If the value is set to "1" (default), there is a border. "0" means no border.
- scrolling - this parameter specifies if scrollbars are rendered in the iframe for over-sized content. The default is "auto", but if you set it to "Yes", scrollbars will always be visible. If set to "No", they will never render (useful to keep an iframe looking tidy, but may reduce usability if content needs to be scrolled and the user does not have a scroll-wheel on their mouse or a scrolling trackpad).
- id - using the id parameter, you can name the iframe with a specific title so that it can be used as a target for other links on the page. For instance, if you gave your iframe an id of "frame1", you could then use the 'target' property in the Hyperlink Manager to specify for other hyperlinks to load within the iframe, rather than a new window just by typing in the id of the iframe.
Here is an example iframe code where the frameborder and scrolling is turned off, and an id has been specified:
<iframe src="http://www.google.com" width="100%" height="350" frameborder="0" scrolling="no" id="googleframe"></iframe>
Which ends up looking like the following:
Compared to the original example shown earlier, this looks a lot cleaner and integrated within the page. But it may not be as usable once the user starts navigating to content within the frame, so make sure to consider these factors first before utilising the advanced iframe parameters.
Embedding HTML pages via the Document Manager
So in order to preserve the design and layout of your custom page, whilst still presenting it within an Ultranet web or class page, you can use the iframe to embed the HTML content.
Here are the steps:
Create and export/save the HTML page(s) from your third-party editor of choice. This may either produce a single HTML file, or a hierarchy of files and folders (usually starting with an "index.html" page, and accompanied by folders containing related media such as images or scripts/CSS).
Sign in to Ultranet, navigate to the page you wish to insert the content into, and open the Page Editor on that page.
Click on the Document Manager icon.
Upload the files produced in step 1.
NOTE: if you are uploading a collection of files rather than a single HTML page, remember to preserve the folder structure as exported by creating the corresponding folder hierarchy in the Document Manager first before uploading the contents. Use the "New Folder" button to achieve this.
Once the files are uploaded, take note/copy the URL path to that page's document store. It will look something like the following: "/DataStore/Pages/Class_XXX/Docs/Documents".
Make sure you then suffix this with the file-name of the single HTML page uploaded, or the starting HTML page in your folder (e.g. it may be called "index.html" or "start.html"). This should therefore result in a full relative URL path to the file, which would look something like the following: "/DataStore/Pages/Class_XXX/Docs/Documents/index.html".
Next, close the Document Manager without inserting any files into the page as links. Instead, switch to HTML view and paste in the iframe code (provided earlier in this article) where you want your content to render.
Remember to adjust the width and height parameters to suit your content. In the "src" parameter, paste/type in the URL obtained in step 4. You can switch back to Design or Preview mode at this point to see what the result looks like, and you can make any adjustments to the iframe parameters if needed.
Once satisfied with the result, click Update to save the page. You should now see your custom HTML content loading within the iframe on the page, effectively embedding the third-party HTML page inside your Ultranet web/class page.