07/10/2016 by Alex Cowles 0 Comments
Adding an iframe to a page in the editor
There is no specific <iframe> module in our editor, but you can use the HTML module to achieve this in a very simple way.
There are a number of reasons you may want to include another page or set of pages in an existing page on your website, and generally an iframe is an acceptable way of doing this.
What is an iframe?
An iframe (Inline Frame) is a piece of HTML code, which allows you to pull another page into your current page (the "inline" part) within a window (the "frame" part). It does not just pull the content through - it is more like a window which allows you to view the framed content.
Will the iframed site allow it?
Before you plan too far ahead, you should make sure that whatever site or page you are going to be adding to the iframe allows this. Some sites will stop cross-domain calls and will result in a blank frame or error message. There is no way round this unfortunately.
Assuming it's allowed, you can go ahead and add the iframe.
Adding the iframe
To add the iframe, you should drag the HTML module into the page where you would like to add the iframe.
In the HTML code, you can then add the iframe code, which you can see below in Example 1.
The code has a start and finish tag, and the start tag contains a "src" (The Source) which is where you add the site you wish to frame.
There are a number of other options you can add to the code to allow it to do various things.
By default, "src" is the only required attribute, but you may also want to add the following:
The height attribute allows you to specify a pixel value for the height of the iframe.
The width attribute also allows you to specify a pixel value for the width.
If you want the iframe to stretch to 100% of the width, or you want to specify a percentage width, you can do this with some inline CSS style rules.
So a 100% width iframe with a height of 500px would have the code you can see in Example 2.
<iframe src="http://www.this-is-a-framed-site.com" height="500" style="width:100%;"></iframe>