Question

我有一个html＆＃34; head＆＃34;模板和导航模板，我想包含在我的网站的所有其他html文件中。我找到了这篇文章：

Include another HTML file in a HTML file

我的问题是......如果它是我要包含的标题怎么办？

例如，我有以下文件结构：

 /var/www/includes/templates/header.html
                             navigation.html

header.html可能如下所示：

<!DOCTYPE html>
<html lang="en">
<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Test Portal</title>

 </head>

在这样的情况下，我是否仍然可以按照其他帖子中的示例创建div并通过jquery填充div？

Answer 1

我认为使用jQuery将html内容/文件包含到另一个html文件中是最好的方法。

您可以简单地包含jQuery.js并使用$("#DivContent").load("yourFile.html");

加载HTML文件

例如

<html> 
  <head> 
    <script src="jquery.js"></script> 
    <script> 
    $(function(){
      $("#DivContent").load("another_file.html"); 
    });
    </script> 
  </head> 

  <body> 
     <div id="DivContent"></div>
  </body> 
</html>

没有可用于包含该文件的标签，但有一些第三方方法可用。

<!DOCTYPE html>
<html>
<script src="http://www.w3schools.com/lib/w3data.js"></script>

<body>

<div w3-include-html="content.html"></div> 

<script>
w3IncludeHTML();
</script>

</body>
</html>

有些人也用过

<!--#include virtual="a.html" -->

Answer 2

我需要包含很多文件。所以我创建了以下脚本：

＆＃13;

<script>
  $(function(){
    $('[id$="-include"]').each(function (e){
        $(this).load("includes\\" + $(this).attr("id").replace("-include", "") +  ".html");
    });
  });
</script>

＆＃13;

例如，使用div为插入添加占位符。

＆＃13;

<div id="example-include"></div>

＆＃13;

创建的文件夹＆＃34;包括＆＃34;对于我需要包含的所有文件。创建文件＆＃34; example.html＆＃34;。它适用于任何数量的包含。您只需使用名称约定并将所有包含的文件放在正确的文件夹中。

Answer 3

使用HTML标记。

我遇到过类似的问题，然后我用了

＆lt; iframe src =“b.html”height =“ 80px ”width =“ 500px ”＆gt;

Answer 4

使用<object>标签：

<object data="filename.html"></object>

Answer 5

对于对Web组件方法感兴趣的任何人：

<html-include src="my-html.html"></html-include>

和相应的JS：

class HTMLInclude extends HTMLElement {
  constructor() {
    super();
    this.innerHTML = "Loading...";
    this.loadContent();
  }

  async loadContent() {
    const source = this.getAttribute("src");
    if (!source) {
      throw new Error("No src attribute given.");
    }
    const response = await fetch(source);
    if (response.status !== 200) {
      throw new Error(`Could not load resource: ${source}`);
    }
    const content = await response.text();
    this.innerHTML = content;
  }
}

window.customElements.define("html-include", HTMLInclude);

请注意，可以使用影子DOM做一些不错的事情，以确保所加载内容的样式不会影响外部页面。

上面的代码是相当“现代”的JS，您可能不想在没有进行polyfills / babel转换的情况下直接使用上面的代码。

Answer 6

这类似于另一种自定义标签解决方案，但是该解决方案使用开始和结束标签之间的文本作为包含路径/ URL。另一种解决方案是使用src属性。

<html-include> ./partials/toolbar.html </html-include>

元素实现有些棘手：

# -- ./js/html-include.js --

class HTMLInclude extends HTMLElement {
    constructor(src) {
        super();
        this.attachShadow({mode: "open"});
        if (src) { 
            this.textContent = src;
        }
        setTimeout(() => this._load());
    }
    async _load() {
        let src = this.textContent.trim();

        if (!src) {
            throw new Error("URL missing between <html-import> tags.");
        } 
        let rsp = await fetch(src);

        if (rsp.status != 200) {
            throw new Error(`Failed to load file (${src}) for <html-import>.`);
        }
        this.shadowRoot.innerHTML = await rsp.text();
    }
}
customElements.define("html-include", HTMLInclude);

setTimeout()是必要的，因为如果this.textContent被过早访问，它可能会包含页面的所有前面的文本（在Chrome / Chromium上可见）。推迟访问即可解决此问题。

这是页面中看起来的样子：

<html>
    <head>
        <link rel="stylesheet" href="./css/index.css">
        <script type="text/javascript" src="./js/html-include.js"></script>
    </head>
    <body>
        <html-include> ./partials/toolbar.html   </html-include>
        <html-include> ./partials/side-menu.html </html-include>
        <html-include> ./partials/statusbar.html </html-include>
    </body>
</html>

CSS样式应正确地应用于新导入的HTML。

也可以通过将JS URL传递给导入文件，从JS中创建该元素。

let wgthost = document.getElementById("tgt");
wgthost.appendChild(new HTMLInclude("./partials/mywidget.html"));

Answer 7

使用php include

所以请将头部保存为head.php，并将其保存在您想要添加头部的每个文件中

<?php include 'path/to/file/head.php';?>

你可以使用导航甚至页脚来做同样的事情，这样你只需要在一个地方改变它就可以了。如果你需要编辑它。

所以您的视图文档看起来像这样

<?php include 'head.php';?>
<body>
    <?php include 'navigation.php';?>

    <!-- page content -->

    <?php include 'footer.php';?>
</body>

请记住将文件保存为php文件而不是html执行此操作。

在另一个html文件中包含html

7 个答案: