模拟头部HTML导入

Simulating head HTML import

本文关键字：导入 HTML 头部 模拟      更新时间：2023-09-26

我有几个.html文件，我想为他们所有人都有相同的头。到目前为止，我可以通过使用html导入在Chrome上做到这一点:

我有一个名为CommonHead.html的页面，其中有一些JS和CSS文件，如:

<!-- CommonHead.html -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

然后我有一堆其他的html页面我把这个放在标题上:

<head>
  <link rel="import" href="CommonHead.html">
</head>

效果很好。然而，Firefox不支持这个，所以我想用JavaScript来做同样的事情。我尝试了.load，使用.ge t进入一个变量，将这些东西附加到标题等。似乎没有什么能可靠地工作。

有谁知道使用javascript/jquery的正确方法是什么?

Firefox当前对HTML导入的立场可以在这里找到:

如前所述，Mozilla目前不打算实现HTML导入。这部分是因为我们想在发布另一种导入外部资产的方式之前看看ES6模块是如何发展的，部分是因为我们觉得它们没有实现很多已经不可能实现的东西。

我们已经在Firefox OS中使用Web组件一年多了，并且发现使用现有的模块语法(AMD或Common JS)来解析依赖树，注册元素，使用普通标签加载似乎足以完成工作。

HTML导入确实适合于更简单/更具声明性的工作流，比如旧的和聚合物当前的注册语法。

这种简单性招致了社区的批评，认为导入没有提供足够的控制，不能作为依赖管理解决方案来认真对待。

理想情况下，您应该使用某种类型的服务器端代码，如PHP来包含依赖项，并将它们输出到您正在呈现的每个HTML页面。

index . php示例:

<html>
    <head>
        <title>Testing</title>
        <?php include('includes/header.php'); ?>
    </head>
</html>

或者，您也可以查看HTML Imports polyfill，它可以在这里找到。这将允许您在IE11+， Firefox, Chrome, Safari 7+和移动设备上使用HTML导入。请注意，不支持的设备(如ie10及以下版本)将无法从中受益。我强烈建议使用服务器端语言，以避免与旧客户端兼容。

其他可能:

  • 服务器端包含
    • jQuery包括
    • <
  • 帧/gh>
相关文章：