Modern websites often need to display content from other websites, such as videos, maps, forms, or advertisements, without redirecting users to a different page.
This functionality is made possible using a powerful HTML element known as an iframe, which acts as a window inside a webpage that displays another webpage.
This feature is widely used across the internet to embed third-party content while maintaining a seamless user experience.
Understanding an iframe
An iframe (short for inline frame) is an HTML element that allows developers to embed another HTML page within the current one.
It works like a small browser window inside the main webpage, displaying another document while maintaining the original page’s context. They are often used for dynamic content integration, such as embedding media (videos, maps), forms, or third-party resources like advertisements and external widgets.
This embedded content can be scrollable, interactive, and styled separately from the main page.
Basic syntax of an iframe is as follows:
<iframe src="https://google.com" width="700" height="400"></iframe>
Closing tags can also include fallback content if the iframe cannot be loaded.
<iframe src="https://google.com">Sorry, this content cannot be displayed.</iframe>
Importance of iframe
There are several reasons why iframes are important:
- Content Modularity: They make it easy to reuse content like ads, forms, or videos across multiple pages, saving time and effort.
- Seamless External Integration: This allows external content (such as videos or maps) to be displayed on the website without redirecting users to another page.
- Improved Security: Using the sandbox attribute isolates third-party content, reducing security risks.
- Reusability: Common elements like headers, footers, or forms can be reused on different sites or pages, making development more straightforward.
Also Read: How to handle iframe in Selenium
Example of iframes (With Code)
iframes are used in many web applications across industries. One of the most common uses of an iframe is embedding Google Maps on the Contact Us page to show a business location.
The below example embeds a Google Map showing the location of New Zealand with interactive features for zooming in and out and panning the map.
<!DOCTYPE html> <html lang="en"> <head> <title>Google Maps Example</title> </head> <body> <iframe src="https://www.google.com/maps/embed/v2/place?q=New+Zealand&key=YOUR_API_KEY" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" sandbox="allow-same-origin allow-scripts allow-popups allow-forms" ></iframe> </body> </html>
Key Attributes of iframe
Some of the important attributes include:
- src: Specifies the URL of the embedded content.
- width / height: Defines the size of the iframe.
- title: Adds a description for accessibility ensuring screen readers can interpret the iframe content.
- sandbox: Enhances security by restricting certain actions (eg., forms, scripts).
- allow: Grants permission for specific features like fullscreen, autoplay or camera access.
- loading=”lazy”: Defers loading the iframe until it’s needed, improving page load performance.
- referrerpolicy: Controls the referrer policy when loading the iframe’s source. Can be set to no-referrer to prevent sending the referrer header, protecting privacy by not disclosing the URL of the referring page.
Learn More: What is Lazy loading?
How to Use an iframe
To display content using the iframe element, the src attribute is used to specify the source URL.
Here’s a basic example:
<iframe src="https://www.google.com/"></iframe>
This embeds the content from www.google.com inside the iframe. Inspecting the iframe element with a tool like Chrome Developer Tools will show the full HTML structure of the page including the <html>, <head> and <body> elements of the embedded document.
The size of the iframe can be controlled using the width and height attributes. The below example sets the iframe to be 200px wide and 200px tall:
<iframe src="https://www.google.com/" width="200" height="200"></iframe>
To limit certain features in the iframe, such as scripting, forms or popups, the sandbox attribute can be used. The sandbox attribute offers several options to control which actions are allowed inside the iframe.
In the below example, the iframe does not allow features like scripts and forms but allows file downloads:
<iframe src="https://www.google.com/" width="300" height="300" sandbox="allow-downloads"></iframe>
Output
When the above code is used, the content from www.google.com is embedded within a 300×300 pixel iframe.
Features like scripts or forms may be restricted depending on the settings, providing a more secure way to embed content.
Testing iframe on Real Devices
Testing iframes on real devices ensures they function properly across different screen sizes and operating systems.
They can behave differently on mobile and desktop devices, so it’s essential to test them on different platforms.
BrowserStack Live is an excellent tool for testing iframes across real devices. It provides access to a real device cloud, ensuring the iframe behaves correctly on different platforms and browsers.
Benefits of Using BrowserStack Live:
- Access to Real Devices: Test iframes on real devices to simulate real user experiences.
- Cross Browser Testing: Ensure the iframe works across different browsers, from Chrome to Safari.
- Mobile and Desktop Testing: Test how iframes perform on both mobile and desktop devices.
- Instant Feedback: Quickly identify layout or functionality issues on real devices and browsers.
Challenges of Using iframe
Here are some key limitations of iframes:
- Security Risks: Embedding third-party content can expose the website to vulnerabilities, such as clickjacking.
- Cross-Origin Issues: Some websites may restrict loading inside an iframe due to security policies.
- Performance Impact: Loading too many iframes can negatively impact the website’s performance, especially if the content is not optimized or lazy loaded.
- SEO Limitations: Search engines may not index iframe content, reducing visibility and discoverability.
- Responsive Design: iframes can sometimes cause mobile device layout issues if not handled appropriately with CSS.
Also Read: Building Responsive Layouts with CSS
Best Practices for Using iframe
Some of the best practices include:
- Lazy Loading: Use loading=”lazy” to load iframes only when they enter the viewport. This improves page load speed and saves resources.
- Set Dimensions: Always define width and height for iframes to prevent layout shifts and maintain a stable design.
- Use Sandbox: Add the sandbox attribute to limit iframe actions like running scripts or submitting forms. This helps improve security.
- Content Security Policy (CSP): When using third-party content, apply CSP headers to protect against data injection and cross-site scripting (XSS) attacks.
- SEO Considerations: Avoid placing important content inside iframes, as search engines may not index it. Provide alternative content or links outside the iframe.
- Add a Title: Include a descriptive title for every iframe to support screen readers and improve accessibility.
- Trusted Sources Only: Embed content from reliable, secure sources to avoid privacy or security issues.
- Prevent Clickjacking: Use the X-Frame-Options header or sandbox restrictions to prevent malicious activities like clickjacking.
Conclusion
The iframe is a valuable tool in web development for seamlessly embedding external content. Whether it’s a video, map, form, or dashboard, iframes provide flexibility and modularity.
However, they should be used with care. Overusing iframes can lead to performance issues, accessibility concerns, and security risks. It’s always better to develop content directly within the site whenever possible.
If embedding is necessary, only include content from trusted sources.
Using proper attributes, secure configurations, and testing across real devices with tools like BrowserStack Live can help ensure that iframes improve a website’s functionality while maintaining safety and a smooth user experience.
Featured Article
