如何导入另外一个html

admin
行业动态
2024-04-04
2894

导入另一个HTML文件的方法有以下几种：

1、使用<iframe>标签

2、使用<object>标签

3、使用<embed>标签

4、使用JavaScript动态加载

下面分别介绍这四种方法：

1. 使用<iframe>标签

在HTML文件中插入一个<iframe>标签，将src属性设置为要导入的HTML文件的路径。

<iframe src="example.html" width="100%" height="500"></iframe>

2. 使用<object>标签

在HTML文件中插入一个<object>标签，将data属性设置为要导入的HTML文件的路径。

<object data="example.html" width="100%" height="500"></object>

3. 使用<embed>标签

在HTML文件中插入一个<embed>标签，将src属性设置为要导入的HTML文件的路径。

<embed src="example.html" width="100%" height="500">

4. 使用JavaScript动态加载

在HTML文件中插入一个空的容器元素（如<div>），然后使用JavaScript动态加载HTML文件并将其内容插入到容器中。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF8">
    <meta name="viewport" content="width=devicewidth, initialscale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="container"></div>
    <script>
        fetch('example.html')
            .then(response => response.text())
            .then(html => {
                document.getElementById('container').innerHTML = html;
            });
    </script>
</body>
</html>