Teach you step by step how to introduce another html file into html (detailed explanation)

烟雨青岚
Release: 2020-06-29 11:40:28
forward
16279 people have browsed it

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>
Copy after login

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>
Copy after login

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>
Copy after login

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>
Copy after login

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!

Related labels:
source:csdn.net
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template