Home >Web Front-end >HTML Tutorial >Teach you step by step how to introduce another html file into html (detailed explanation)

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

烟雨青岚
烟雨青岚forward
2020-06-29 11:40:2816313browse

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!

Statement:
This article is reproduced at:csdn.net. If there is any infringement, please contact admin@php.cn delete