What Is an iframe in Dreamweaver?
An inline frame, or iframe, is a HTML element that allows you to display an external document within an area of a Web page, acting like a mini browser window within your page. Any links in the content displayed in the iframe will open in the iframe if clicked, leaving the rest of the page content unaltered. If required, you can display an iframe without a border or scroll bars, enabling the iframe to blend in seamlessly with your Web page.
-
What Is Iframe?
-
A HTML iframe element is included on your page using the HTML <iframe> tag, and can display content from another page on your website, or from a third-party website. You can add the iframe tag to your HTML source code manually, or if you use Adobe Dreamweaver click on the “Insert” menu, and then select “HTML” > “Frames” > “Iframe” to insert an iframe into your page. The most commonly used attributes are the “src” attribute, which contains the URL of the content to display, and the “id” attribute, used to reference the iframe using JavaScript or CSS. For example:
<iframe src="http://www.domain.com/page.html" id="myframe">This text is displayed if the browser does not support iframes.</iframe>
Styling Iframe
-
The iframe tag includes a height and width attribute, allowing you to specify the height and width of the iframe in pixels, or as a percentage of the parent container. HTML4 also supports the frameborder attribute, which you can set to 0 to hide the iframe border, or 1 to display the border. You may also style the iframe and set the height and width using CSS, allowing you to keep your site styling separate from the HTML code used to display the page.
-
HTML 5
-
Although the HTML frame tag has been deprecated in HTML5, the iframe tag is still available, although its attributes have been modified. The frameborder attribute is deprecated and replaced with the seamless attribute. At time of publication, not all browsers support this attribute, but you can remove the border by setting the border width to "0" and color to "transparent" using CSS. The new sandbox attribute allows you to set restrictions on the content that the iframe can display, for example only allowing content from the same origin, and whether to allow scripts in the iframe to execute.
Iframe Considerations
-
Iframes are useful to share content across domains, and commonly used to embed advertisements or forms from external sources into Web pages. This does carry a risk however, as you effectively handing over control of the content on your Web page to a third party. For example, some popular Internet sites have inadvertently served malware to their users through displaying third-party advertisements. You must also seek permission from the source before displaying third-party content. You should also be aware that iframes could cause problems with some devices such as screen readers and mobile phones due to their small screen size.
-