社区首页 >问答首页 >模拟head HTML导入

模拟head HTML导入
EN

Stack Overflow用户
提问于 2016-10-25 15: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 15: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

复制
相关文章
HTML-head标签学习
<html> <head><!--head标签中主要配置浏览器的配置信息--> <title>HTML学习</title><!--网页标题标签:告诉浏览器使用什么标题显示网页--> <!--<meta charset="utf-8"/>--><!--网页解析编码格式配置(HTML5):告诉浏览器使用指定的编码格式解析文档--> <meta http-equiv="content-type" content="text/html;charset=utf-8"/><!--HTML4:文档编码格式设置
葆宁
2019/04/18
3830
HTML head 头标签 总结
HTML head 头部分的标签、元素有很多,涉及到浏览器对网页的渲染,SEO 等等,而各个浏览器内核以及各个国内浏览器厂商都有些自己的标签元素,这就造成了很多差异性。移动互联网时代,head 头部结构,移动端的 meta 元素,显得更为重要。了解每个标签的意义,写出满足自己需求的 head 头标签,是本文的目的。本篇以一丝的文章为基础,进行扩展总结介绍常用的 head 中各个标签、元素的意义以及使用场景。 DOCTYPE DOCTYPE(Document Type),该声明位于文档中最前面的位置,处于 h
前朝楚水
2018/04/02
1.9K0
一、前端基础-html-head标签
<!-- HTML HTML 是用来描述网页的一种语言。 HTML 指的是超文本标记语言 (Hyper Text Markup Language) HTML 不是一种编程语言,而是一种标记语言 (markup language) 标记语言是一套标记标签 (markup tag) HTML 使用标记标签来描述网页 --> <!--HTML 标签 HTML 标记标签通常被称为 HTML 标签 (HTML tag)。 HTML 标签是由尖括号包围的关键词,比如 <html> HTML 标签通常是成对出现的,比如
堕落飞鸟
2022/02/10
3970
HTML5 模拟现实物理效果
Ball Pool 是一个基于 HTML5 技术的实验,模拟现实物理效果,让你在 Web 中感受自然物体的运动。玩法介绍:可以随意拖动圆球、点击页面背景、晃动浏览器、双击页面背景或者按住鼠标左键,有不同的效果,赶紧来体验一下。
用户3055976
2018/09/12
1.3K0
HTML5 模拟现实物理效果
SpringBoot当中如何整合静态html(模拟SpringMVC)
整合静态html(模拟SpringMVC): 1)在上一个项目中,在src/main目录下,添加resources/static/index.html:(参考目录下:BootSpringMVC)注意:在resources根目录下添加test.html,是访问不到的。在src/main目录下,添加resources/templates/result.html,也是访问不到的。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> index1 <a href="/hello.do">test SpringMvc</a> </body> </html> package com.SpringbootMaven; import java.io.IOException; import javax.servlet.http.HttpServletResponse; import org.springframework.boot.SpringApplication; import org.springframework.boot.autoconfigure.SpringBootApplication; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping;
马克java社区
2019/07/26
1.3K0
SpringBoot当中如何整合静态html(模拟SpringMVC)
linux head
head 与 tail 就像它的名字一样的浅显易懂,它是用来显示开头或结尾某个数量的文字区块,head 用来显示档案的开头至标准输出中,而 tail 想当然尔就是看档案的结尾。
用户5760343
2022/05/23
1.1K0
Linux 命令 | head
head 命令是 Linux/Unix 操作系统下的一个常用命令,主要用于查看文本文件的头部内容,它可以显示文件的前N行内容。
小林C语言
2023/09/14
1960
Linux 命令 | head
Head First PageRank
PageRank算法是谷歌曾经独步天下的“倚天剑”,该算法由Larry Page和Sergey Brin在斯坦福大学读研时发明的,论文点击下载: The PageRank Citation Ranking: Bringing Order to the Web。
宅男潇涧
2018/08/01
1.2K0
Head First PageRank
Git HEAD detached from XXX (git HEAD 游离) 解决办法
通常我们在首次进行代码的拉取的时候容易出现HEAD游离状态, 也就是说当前操作不在任何一个现有分支上, 一般情况下我们在进行代码修改时需要先将对分支进行相应切换, 比如在master分支上进行开发, 那就git checkout master切换到master分支
乱码三千
2021/08/24
1.9K0
Git HEAD detached from XXX (git HEAD 游离) 解决办法
张拭心 shixinzhang
2018/01/05
4K0
Git HEAD detached from XXX (git HEAD 游离) 解决办法
Head First Android Toolbar
上一节我们介绍了ActionBar的使用,这一节我们介绍ActionBar 的替代者——Toolbar,看看它有多大的能耐!
宅男潇涧
2018/08/01
8980
Head First Android Toolbar
Linux之head命令
head 命令可用于查看文件的开头部分的内容,有一个常用的参数 -n 用于显示行数,默认为 10,即显示 10 行的内容。如果提供了多个文件名,则每个文件中的数据都以其文件名开头。 命令格式 head [参数]... [文件]... 命令功能 head 用来显示档案的开头至标准输出中,默认head命令打印其相应文件的开头10行。 命令参数 -q 隐藏文件名,在多个文件名的情况下有效 -v 显示文件名 -c N 从头显示N字节的内容 -n N 从头显示N行 显示文件的前10行 > head -n 10 1
入门笔记
2021/02/09
1.3K0
记:EVE模拟器拓扑配置的保存及导入
参考博客:https://bbs.51cto.com/thread-1599315-1.html###
全栈程序员站长
2022/08/14
2.8K0
记:EVE模拟器拓扑配置的保存及导入
Linux内核10-list_head和hlist_head的理解
在Linux内核中,对于数据的管理,提供了2种类型的双向链表:一种是使用list_head结构体构成的环形双向链表;另一种是使用hlist_head和hlist_node2个结构体构成的具有表头的链型双向链表。
Tupelo
2022/08/10
2.6K0
Linux内核10-list_head和hlist_head的理解
LinuxShell命令head
head 命令用于在标准输出上显示每个文件起始 10 行。如果多于一个文件,则会逐个进行显示,并在每个文件显示的首部给出对应的文件名。如果没有指定文件或者指定为 -,则从标准输入上读取。
hotarugali
2022/02/28
6860
Linux 命令 | head
head 命令是 Linux/Unix 操作系统下的一个常用命令,主要用于查看文本文件的头部内容,它可以显示文件的前N行内容。
小林C语言
2023/09/14
3950
Head 和 Options 请求
head请求是http1.0约定的三种请求方式之一,与get请求相似,但是响应报文中没有响应体,只有响应头。
lonelydawn
2021/09/26
2.9K0
ES Head插件安装
地址:https://github.com/mobz/elasticsearch-head
郑小超.
2022/09/08
5920
ES Head插件安装
❤️使用 HTML、CSS 和 JavaScript 的简单模拟时钟❤️
正如你在上图中所看到的,这里我借助 HTML、CSS 和 JavaScript 制作了一个简单的模拟时钟。早些时候我制作了更多类型的模拟和数字手表。如果你愿意,你可以看看这些设计。
海拥
2021/08/23
2.7K0
❤️使用 HTML、CSS 和 JavaScript 的简单模拟时钟❤️
点击加载更多

相似问题

Outlook2010VBA脚本保留.html导入的<head></head>部分

14

替换html中的<head></head>

120

如何模拟http.Head()

12

$('<html><head>...</head><body>...</body></html>')是如何工作的?

25

如何在html中将<Head>从next/head从body移动到head

217
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文