logo标签列表

如何在不延迟的情况下从其他HTML文件中包含HEAD标签或CSS？

javascriptjqueryhtmlcssinclude
3
因为ISAPI与其他ISAPI无法同时使用，所以我无法使用PHP。通常情况下，我可以创建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（http://en.wikipedia.org/wiki/Flash_of_unstyled_content），这可能会对用户体验造成不良影响。 - Jack
那你的建议是我在每个文件中复制<head>...</head>吗？这样的问题在于如果我需要添加什么东西，我就必须更改每个文件。还有其他的想法吗？我的模板在每个页面上基本相同。 - Harts
这是一个棘手的问题，因为有很多未知因素！ :) 就我个人而言，如果是个人网站并且我在本地有控制权，我会考虑使用构建工具。否则，在过去，我看到开发人员使用模板语言并以此方式分解部分内容。这也可能是一个选项（只需最小化FOUC，我认为这可能有效-让我看看是否可以组合一下！） - Jack
这绝对不是一个解决方案，但我想分享一下！这里有一个使用dust的fiddle：http://jsfiddle.net/qZB3V/ - 还有一个shell http://fiddle.jshell.net/qZB3V/show/ （可以用来检查）- 两个都只是改变标题和链接到一个假的CSS文件（没有什么疯狂的东西）。考虑得更多，你可以用这个来设计非常华丽的效果。主要的缺点是将事物转换为模板。这是我在服务器上放的另一个例子：http://jackpattishall.com/so/dust-red.html - 如果你正在使用Chrome，请查看源代码，然后检查DOM。希望这会有所帮助！ - Jack
2个回答
0

  • 不需要 document ready，因为你希望 CSS 在页面其他元素之前加载

    $("#header").load("../../common/header.htm");

  • 在 header.htm 中使用绝对路径引用你的 CSS 文件。我怀疑你的 CSS 无法加载是因为相对路径的问题

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

    • 或者

    ../../css/css1.css

    希望这可以帮到你。
    0
    你可以通过两种方式来实现这个目标：
    使用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，它看起来像一个注释，您可以访问此链接。 在另一个HTML中包含HTML

    网页内容由stack overflow 提供, 点击上面的
    可以查看英文原文，
    原文链接