Last Updated on 2021-03-19 by Clay
Introduction
If you want to embed a HTML file in another HTML web page, you can use "iframe" to do it.
But iframe has its advantages and disadvantages.
The advantage is that it supports almost all browsers; the disadvantage is that it 's page loading is slow and is not conducive to SEO.
But this article doesn't discuss that, only record how to use.
Use URL
A simplest way is enter the URL:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Main Page</title>
</head>
<body>
<span>This is main page.</span>
<iframe frameborder="0"
noresize="noresize"
style="position: absolute; background: transparent; width: 100%; height:100%;"
src="https://clay-atlas.com"
frameborder="0">
</iframe>
</body>
</html>
Output:
This is my blog URL.
You can see that in addition to printing out "This is main page", the website of my blog is also embedded in the page.
Use HTML file
Of course you can use HTML file to embed in a HTML page. For example, suppose we have the following two html files:
We want to embed "iframe.html" in "main.html", and we can use the following code.
main.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Main Page</title>
</head>
<body>
<span>This is main page.</span>
<iframe frameborder="0"
noresize="noresize"
style="position: absolute; background: transparent; width: 100%; height:100%;"
src="iframe.html"
frameborder="0">
</iframe>
</body>
</html>
iframe.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Main Page</title>
</head>
<body>
<span>This is iframe page.</span>
</body>
</html>
Output:
The content of the iframe page is embedded in the main page.
Use HTML code
Change "src" to "srcdoc" and we can enter the HTML code in a HTML file.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Main Page</title>
</head>
<body>
<span>This is main page.</span>
<iframe srcdoc="<div>hello</div>"</iframe>
</body>
</html>
Output:
Of course, this is a relatively rough example, and it can actually complete pretty embedding pages.