The iframe component

The iframe component, whose option icon is shown in figure 1, embeds content from another site into your page.

Figure 1. the iframe option icon

Iframe etiquette

Any web page can be embedded in an iframe, but you should ensure that you have the permission of the site owner to embed their content. There have been legal cases due to a website being framed without permission (see, for example, Washington Post Co. v. Total News, Inc.).

Embedding a page that has not been designed for use in iframe will lead to a poor visitor experience. For example, if the page is larger than the iframe then scroll bars will be required. Additional scroll bars within a page confuse visitors, and horizontal scroll bars are particularly difficult to use.

Iframes in third-party widgets

Many sites provide widgets that can be embedded within your site, and these widgets often use iframes. The third-party site will provide HTML code, which might look something like this:

<!-- begin example.com widget -->
<div id="example-widget">
<iframe src="http://example.com/widget/" width="200" height="400" scrolling="no">
</div>
<!-- end example.com widget -->

If the code contains the word iframe (highlighted in red in the example above) then the widget uses an iframe. Shortly after the word iframe you should see the word src followed by an address within quotation marks (highlighted in blue in the example above): this is the address to use in the iframe component.

Editing an iframe

Click anywhere on an iframe to display the iframe window, as shown in figure 2.

Figure 2. the iframe window

The iframe window lets you change the following settings:

Address to show
The address of the content to show in the iframe.
Height (in pixels)
The height, in pixels, of the iframe.
Scroll bars
Whether to show scroll bars on the iframe always, never, or only when the content is larger than the iframe.

The following settings control what the content in the iframe is allowed to do. By default the allow forms, allow scripts, and allow same origin settings are checked, but you may find you need to check the allow top navigation or allow pop-ups settings for widgets such as booking forms (which tend to load a new page when submitted) to work properly.

Allow forms
Check this setting to allow forms to be submitted within the iframe.
Allow scripts
Check this setting to allow content in the iframe to run JavaScript code.
Allow same origin
Check this setting to allow JavaScript code within the iframe to communicate with the website that hosts the content.
Allow top navigation
Check this setting to allow the content in the iframe to a load a new page in the current window or tab.
Allow pop-ups
Check this setting to allow the content in the iframe to a load a new page in a new window or tab.
Allow full screen
Check this setting to allow the content in the iframe to expand to cover the full screen.

Click OK to apply the changes to the iframe. Click Cancel to return to the page without changing the iframe.