如何在 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 ”。
• 创建另一个 HTML 文件以包含“ index.html”文件。
• 在主 HTML 文件中创建一个 JavaScript函数以包含 HTML 片段。
• 调用主（ “index.html ”）文件中的函数以包含“ gfg.html ”的片段。

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

HTML

  

    

        
            This is index.html 
        
    

  

输出：

第 2 步：创建另一个您选择的 HTML 文件以包含在“ index.html ”文件中，并将该文件保存在“ index.html ”所在的同一目录中。在本文中，创建一个名为“ gfg.html ”的 HTML 文件，其中显示“GeeksforGeeks A Computer Science Portal For Geeks”。

HTML

  

  

    
GeeksforGeeks
    

        A computer science portal for geeks
    
  
    

        
            This is gfg.html 
        
    

  

输出：

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

添加 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.
            }
        }
    };

第 4 步：在页面底部调用includeHTMLSnippet() 。

    includeHTMLSnippet();

最终代码：以下代码演示了上述所有步骤的组合。

索引.html

  

    
        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.
                }
            }
        };
    

  

    
        
            This is index.html 
        
    
  
    
      
    
        includeHTMLSnippet();
    

  

gfg.html

  

    

  

    

        GeeksforGeeks
    
      
    

        A computer science portal for geeks
    
      
    

        
            This is gfg.html
        
    

  

输出：

区分 index.html 中包含的 gfg.html 片段：红色边框表示主index.html的输出，蓝色边框表示包含的 HTML 片段的输出。