首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >模拟head HTML导入

模拟head HTML导入
EN

Stack Overflow用户
提问于 2016-10-25 23:17:07
回答 1查看 71关注 0票数 1

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

我有一个名为CommonHead.html的页面,其中包含一些JS和CSS文件,如下所示:

代码语言:javascript
代码运行次数:0
运行
复制
<!-- 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页面,我把它放在页眉上:

代码语言:javascript
代码运行次数:0
运行
复制
<head>
  <link rel="import" href="CommonHead.html">
</head>

这是完美的工作。然而,火狐不支持这一点,所以我想要一种使用JavaScript做同样事情的方法。我尝试了.load,将.get添加到变量中,并将内容附加到标题中,等等。似乎没有什么是可靠的。

有人知道用javascript/jquery做这件事的正确方法是什么吗?

EN

回答 1

Stack Overflow用户

发布于 2016-10-25 23:23:19

Firefox当前对HTML导入的立场可以在here上找到

如前所述,

目前并不打算实现超文本标记语言导入。这在一定程度上是因为我们希望在发布另一种导入外部资产的方法之前看到ES6模块的效果,还有一部分原因是我们觉得它们并没有支持很多已经不可能实现的功能。

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

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

这种简单性带来了来自社区的批评,即导入没有提供足够的控制,无法作为依赖项管理解决方案认真对待。

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

示例index.php:

代码语言:javascript
代码运行次数:0
运行
复制
<html>
    <head>
        <title>Testing</title>
        <?php include('includes/header.php'); ?>
    </head>
</html>

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

其他一些可能性:

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/40243703

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档