HTML 如何从其他 htm 文件中包含 HEAD 标记或 CSS 而不会延迟答案

【问题标题】：HTML how to include HEAD tag or CSS from other htm file without delayHTML 如何从其他 htm 文件中包含 HEAD 标记或 CSS 而不会延迟
【发布时间】：2014-07-31 22:49:48
【问题描述】：

所以，我不能使用 PHP，因为 ISAPI 不能与其他一些 ISAPI 一起工作。无论如何，通常我可以创建index.php 和header.php 然后在index.php 中我只使用include()。

但是现在，由于文件必须使用 .htm 扩展名，我想知道如何包含来自其他文件的内容，例如：如果我说 index.htm 和 header.htm 和 other.htm

header.htm 看起来像这样

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

    <title>Dashboard</title>

    <!-- Bootstrap core CSS -->
    <link href="css/customBootstrap/bootstrap.min.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="css/styles.css" rel="stylesheet">

    <!-- Fonts -->
    <link href="css/fa-4.0.3/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link href='http://fonts.googleapis.com/css?family=Muli' rel='stylesheet' type='text/css'>

    <!-- Favicon -->
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <link rel="icon" href="favicon.ico" type="image/x-icon">

    <!-- Just for debugging purposes. Don't actually copy this line! -->
    <!--[if lt IE 9]><script src="../../docs-assets/js/ie8-responsive-file-warning.js"></script><![endif]-->

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->

    <!-- FontAwesome Fix for IE7 -->
    <!-- [if IE 7]>
        <link href="css/fa-3.2.1/font-awesome.min.css" rel="stylesheet" type="text/css" />
        <link href="css/fa-3.2.1/font-awesome-ie7.min.css" rel="stylesheet" type="text/css" />
    <![endif]-->

  </head>

所以我想要在任何其他文件中，我不必在顶部复制相同的内容（所以我只需要更改一个文件）。

我该怎么做？我试过这样的东西它工作。但是，它有一瞬间的延迟（因此，在正确加载之前，用户会在一瞬间看到没有 css 的页面。

<!DOCTYPE html>
<html lang="en">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script> 
        $(function(){
          $("#header").load("../../common/header.htm"); 
        });
    </script> 

    <div id="header">
    </div>
    <body>
       ....

有什么帮助吗？

谢谢

【问题讨论】：

就个人而言，我会避免使用 JavaScript 为 <head> 加载资源。使用 CSS 文件和 $(function(){...})，您最终会得到一个可能会影响用户体验的 FOUC (en.wikipedia.org/wiki/Flash_of_unstyled_content)。
那么您的建议是我在每个文件上复制 ... 吗？如果我需要添加一些东西，我必须更改每个文件。还有其他想法吗？我的模板几乎每个页面都一样。
这是一个棘手的问题，因为未知数！ :) 就个人而言，我会研究一个构建工具（特别是如果它是一个个人站点 - 我可以在本地控制它）。否则，在过去，我看到开发人员使用模板语言并以这种方式分解部分。这也可能是一个选择（只需最小化 FOUC，我认为这可能会起作用 - 让我看看我是否可以拼凑出一个小提琴！）
这绝对不是解决方案，但我想分享！这是一个使用灰尘的小提琴：jsfiddle.net/qZB3V - 和一个 shell fiddle.jshell.net/qZB3V/show（所以你可以检查） - 两者都只是更改标题并链接到一个假的 CSS 文件（没什么疯狂的）。多想一想，你会很喜欢这个。主要的缺点是将事物转换为模板。这是我在服务器上投放的另一个示例：jackpattishall.com/so/dust-red.html - 如果您使用的是 Chrome，请查看源代码，然后检查 DOM。希望这会有所帮助！

标签： javascript jquery html css include

【解决方案1】：

您可以通过两种方式实现：

使用 jQuery：

index.htm

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

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

header.htm

<p> This is my included file </p>

或者使用简单的html，虽然看起来像评论，你可以访问这个链接。 Including HTML inside another HTML

【讨论】：

【解决方案2】：

不需要准备好文档，因为您希望 css 在正文中的其他元素之前加载

$("#header").load("../../common/header.htm");
在 header.htm 中为您的 css 文件使用绝对路径。我怀疑由于 css 相对路径，您无法加载 css

/path/to/your/css/css1.css

或

../../css/css1.css

希望有帮助

【讨论】：