Home > Article > Web Front-end > Teach you step by step how to introduce another html file into html (detailed explanation)
html introduces a method of calling another html. I have tried several methods and listed them all:
The first one is the best, and the other methods are , you can try to see if it is suitable for your current project
1. p $(“#page1”).load(“b.html”)
Reference Code:
<body>
<p id="page1"></p>
<p id="page2"></p>
<script>
$("#page1").load("page/Page_1.html");
$("#page2").load("page/Page_2.html"); </script></body>2. iframe
Reference code:
<head>
</head>
<body>
<p id="page1">
<iframe align="center" width="100%" height="170" src="page/Page_1.html" frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="no">
</iframe>
</p>
<p id="page2">
<iframe align="center" width="100%" height="170" src="page/Page_2.html" frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="no">
</iframe>
</p>
</body>3. Object introduction
Reference code:
<head>
<object style="border:0px" type="text/x-scriptlet" data="page/Page_1.html" width=100% height=150>
</object></head>IV. Import introduction
Reference code:
<head>
<link rel="import" href="page/Page_1.html" id="page1"></head><body>
<script>
console.log(page1.import.body.innerHTML); </script></body>Reference article: https://www.web-tinker.com /article/20637.html
5. The panel component of bootstrap or the window component of easyui is somewhat similar to this effect.
Thank you everyone for reading, I hope you will benefit a lot.
This article is reproduced from: https://blog.csdn.net/arvin0/article/details/56839242
Recommended tutorial: "HTML Tutorial"
The above is the detailed content of Teach you step by step how to introduce another html file into html (detailed explanation). For more information, please follow other related articles on the PHP Chinese website!