Teach you step by step how to introduce another html file into html (detailed explanation)-HTML Tutorial-php.cn

Home

Web Front-end

HTML Tutorial

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

烟雨青岚

Jun 29, 2020 am 11:40 AM

html html file

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!

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

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos