Question

我有几个.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执行此操作的正确方法是什么？

Answer 1

可以在here找到Firefox当前对HTML Imports的立场：

如前所述，Mozilla目前不打算实施HTML Imports。这部分是因为我们希望在发布另一种导入外部资产的方式之前看看ES6模块是如何发布的，部分是因为我们认为它们不能实现许多已经无法实现的功能。

我们已经在Firefox OS中使用Web Components超过一年了，并且发现使用现有的模块语法（AMD或Common JS）来解析依赖树，注册元素，使用普通标记加载似乎足以完成任务。

HTML Imports确实适用于更简单/更具声明性的工作流程，例如旧版和Polymer的当前注册语法。

由于这种简单性，来自社区的批评是Imports没有提供足够的控制权来作为依赖管理解决方案而被认真对待。

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

示例index.php：

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

或者，您也可以查看HTML Imports polyfill，可以找到here。这将允许您在IE11 +，Firefox，Chrome，Safari 7+和移动设备上使用HTML Imports。请注意，不支持的设备（如10及以下，不能从中受益）。我强烈建议使用服务器端语言，以避免与旧客户端兼容。

其他一些可能性：

模拟头HTML导入

1 个答案: