HTML 如何包含HTML代码片段

在本文中，我们将学习如何在HTML代码中包含HTML片段。我们将把“gfg.html”的HTML代码片段包含到“index.html”中。为了实现这个任务，我们将在“index.html”中编写一个JavaScript函数，遍历“gfg.html”中的所有HTML元素集合，并搜索具有特定属性的元素。它创建一个HTTP请求，属性值作为文件名。最后，我们将区分主“index.html”文件和包含“gfg.html”片段。

方法：

创建两个HTML文件“index.html”和“gfg.html”。
为包含“index.html”文件创建另一个HTML文件。
在主HTML文件中创建一个JavaScript函数来包含HTML片段。
在主（“index.html”）文件中调用该函数，以包含“gfg.html”的片段。

步骤1： 创建名为“index.html”的主HTML文件。该文件将显示一个标题文本“这是index.html”。

HTML

<!DOCTYPE html>
<html>
<body>
    <h1 align='center'>
        <font color='Red'>
            This is index.html 
        </font>
    </h1>
</body>
</html>

输出：

HTML 如何包含HTML代码片段

步骤2 : 创建另一个HTML文件，以便包含在“index.html”文件中，并将此文件保存在与“index.html”所在的同一目录中。在这篇文章中，创建一个名为“gfg.html”的HTML文件，其中显示“GeeksforGeeks A Computer Science Portal For Geeks”。

HTML

<!DOCTYPE html>
<html>
<style>
    body {
        text-align: center;
    }
 
    .gfg {
        font-size: 180px;
        font-weight: bold;
        color: green;
    }
 
    .geeks {
        font-size: 50px;
        font-weight: bold;
        font-family: Arial;
    }
</style>
<body>
    <div class="gfg">GeeksforGeeks</div>
    <div class="geeks">
        A computer science portal for geeks
    </div>
 
    <h1>
        <font color='Blue'>
            This is gfg.html 
        </font>
    </h1>
</body>
</html>

输出：

HTML 如何包含HTML代码片段

步骤3： 我们将在“index.html”文件中包含“gfg.html”片段。通过使用GFG-include-html-snippet属性来包含HTML。

<div GFG-include-html-snippet="gfg.html"></div>

添加JavaScript代码

遍历所有HTML元素的集合。
搜索具有特定属性的元素。
以属性值作为文件名创建一个HTTP请求。
删除该属性并再次调用此函数。
退出函数。

JavaScript代码片段：

Javascript

function includeHTMLSnippet() {
 
    // Traverse the collection of all
    // HTML elements
    id = document.getElementsByTagName("*");
    for (i = 0; i < id.length; i++) {
        element = id[i];
 
        // Search for elements with
        // specific attributes
        file = element.getAttribute(
            "GFG-include-html-snippet");
 
        if (file) {
 
            // Create an HTTP request with
            // the attribute value as the
            // file name
            xmlRequest = new XMLHttpRequest();
            xmlRequest.onreadystatechange = function () {
                if (this.readyState == 4) {
                    if (this.status == 200) {
                        element.innerHTML = this.responseText;
                    }
 
                    if (this.status == 404) {
                        element.innerHTML = "Page not found.";
                    }
 
                    // Delete the attribute and
                    // call this function again.
                    element.removeAttribute(
                        "GFG-include-html-snippet");
 
                    includeHTMLSnippet();
                }
            }
            xmlRequest.open("GET", file, true);
            xmlRequest.send();
            return; // Exit function.
        }
    }
};

输出：

HTML 如何包含HTML代码片段