PUBLISHED ON: JULY 23, 2021
How to embed the other webpage into the current document?
Answer: Using the <iframe> tag
Like images, videos, and audio, we can also embed some other web pages to the webpage. HTML provides an easy way to embed other documents into the existing HTML document. We will use iframe for this purpose. Let's see how to do this.
HTML iframe
HTML <iframe> are used to allows embedding third-party elements on the web page. It can easily embed other web pages or documents like PDF on the current page. There are some important attributes to use while embedding any webpage or document to the current page.
allowfullscreen - It allows the <iframe> to be set in full screen.src - It is used to include the path of a document or web page embedded in the current web page. You can add an HTML document or add the embed code of the webpage to it.frameborder - By default, the border is set to 0. It means there is no border around the <iframe> element. But we can add a border using frameborder value as 1.width and height - Set the height and width of the element accordingly.sandbox - It allows securing your <iframe> elements.
Always be careful while adding third-party content to your webpage. Most of the contents have copyright.
Example: Add another webpage to the current webpage
Here in the following program, we have added a webpage within a webpage.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML</title>
</head>
<body>
<h2>A webpage within a webpage</h2>
<p> A social media post of our website. </p>
<iframe src="https://www.facebook.com/plugins/post.php?href=https%3A%2F%2Fwww.facebook.com%2FStudytonight%2Fposts%2F3919294141502643&show_text=true&width=500" width="400" height="300" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowfullscreen="true" sandbox ></iframe>
</body>
</html>
Output
Example: Embed a google map on the webpage
To embed a map on the webpage, simply visit the official website of google maps.
Click on the hamburger menu and then Click on the share or embed link. Go to the embed map link and copy it and then paste it to your HTML code.
Conclusion
The embedded page within another page can help users to view the page easily without any extra loading time. But when using such type of third-party content always be cautious about copyright use.
