使页眉和页脚文件包含在多个 html 页面中

2023-12-03

我想创建包含在多个 html 页面上的通用页眉和页脚页面。

我想使用 JavaScript。有没有办法只使用 html 和 JavaScript 来做到这一点?

我想在另一个 html 页面中加载页眉和页脚页面。


你可以通过以下方式完成此操作jquery.

将此代码放入index.html

<html>
<head>
<title></title>
<script
    src="https://code.jquery.com/jquery-3.3.1.js"
    integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
    crossorigin="anonymous">
</script>
<script> 
$(function(){
  $("#header").load("header.html"); 
  $("#footer").load("footer.html"); 
});
</script> 
</head>
<body>
<div id="header"></div>
<!--Remaining section-->
<div id="footer"></div>
</body>
</html>

并将这段代码放入header.html and footer.html,在同一位置index.html

<a href="http://www.google.com">click here for google</a>

现在,当您访问index.html,您应该能够单击链接标签。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

使页眉和页脚文件包含在多个 html 页面中 的相关文章

  • 使用 ES6 模块导出/导入单个类方法?

    假设我有一个像这样的简单课程fileA js class foo constructor x this name x fooMethod x return x hello 我想导入并使用fooMethod in fileB js像这样 im
  • t /= d 是什么意思? Python 和错误

    t current time b begInnIng value c change In value d duration def easeOutQuad swing function x t b c d alert jQuery easi
  • 将 Isotope 与通过 XML 和 jQuery 加载的对象一起使用。这可能吗?

    我正在使用 XML 和 jQuery 加载对象 并尝试连接到同位素 但似乎这是不行的 这可能吗 我尝试了许多不同的解决方案 但似乎找不到有效的解决方案 这就是我所拥有的 我已经尝试过同位素中的回调函数 但仍然没有运气 我用 XML 调用我的
  • 页面点击其他路径后 $timeout 继续运行

    我在用yo angular fullstack生成器来构建我的网站 当用户注册该网站时 它将发送一封带有链接的激活电子邮件 当用户点击该链接时 会显示激活成功并超时进入主页 但是 当超时未结束 用户点击页面中的任何其他链接时 会跳转到其他页
  • 禁用任何类型的浏览器窗口滚动?

    有没有办法禁用滚动 不仅仅是滚动条 还有浏览器窗口的全部功能 根据您对 Keit 的回答 您不想在打开灯箱时滚动处于活动状态 如果是这种情况 您可以使用以下 css 在打开灯箱的同时向正文添加一个类 这个解决方案的好处是它保留了滚动 空间
  • Rxjs 可观察等待直到满足某些条件

    我有以下重试逻辑来重试操作 对于单个请求来说它工作得很好 对于多个正在进行的请求 我想在重试之前等待现有的重试逻辑完成 handleError errors Observable
  • Rails 4 - 带有 dependent-fields-rails 的条件 JS

    我正在尝试弄清楚如何在我的 Rails 4 应用程序中使用 dependent fields rails gem 我迷路了 我已将 underscore js 包含在我的供应商 javascripts 文件夹中 并更新了我的 applica
  • 在IOS中,引导模式中的iframe无法滚动

    我在引导程序模态体内有一个 iframe div class modal fade div class modal dialog div class modal content div class modal header div div
  • 如何排除CSS伪类选择器中的最后一个子元素

    我想为从 4 到 n 1 的子 div 应用特定样式 我能够从 4 到 n 执行此操作 但无法排除最后一个 div 这是 jsfiddlehttp jsfiddle net 8WLXX http jsfiddle net 8WLXX con
  • Web浏览器控件:如何捕获文档事件?

    我正在使用 WPF 的 WebBrowser 控件加载一个简单的网页 在这个页面上我有一个锚点或一个按钮 我想在我的应用程序后面的代码中 即在 C 中 捕获该按钮的单击事件 WebBrowser 控件是否有办法捕获加载页面元素上的单击事件
  • 如何在 OpenLayers 3 中删除监听器

    我做了一个copy https gis stackexchange com questions 178222 how to delete a listener in openlayers 3我在 stackoverflow 上提出的问题 因
  • 如何为 ng-repeat orderBy 创建回调?

    寻找一种方法让 AngularJS 的 ng repeat orderBy 过滤器在完成渲染后执行回调 Markup div table thead tr th Name th th Age th tr thead tbody tr tr
  • 优化正则表达式以过滤数千个 HTML 选择选项

    背景 我开发了一个基于 jQuery 的穿梭小部件 https stackoverflow com a 13557000 59087对于 HTMLselect元素 因为我找不到一个经过最低限度编码并提供正则表达式过滤器来补偿的元素变音符号
  • 使用 dnode 从服务器向客户端发送消息

    几个月前 我发现了 nowjs 和 dnode 并最终使用了 nowjs 并且https github com Flotype nowclient https github com Flotype nowclient 用于客户端 服务器双向
  • 地址更改时如何停止 Angular 重新加载

    我正在使用 Angular 的scrollTo and anchorScroll像这样 app controller TestCtrl function scope location anchorScroll scope scrollTo
  • 如果在 HTML 标记中使用自定义属性会发生什么?

    这个问题与以下内容无关jQuery本身 但我发现了一个名为Metadata found there http docs jquery com Plugins Metadata metadata其中一个示例使用自定义标签属性 li li 问
  • 如何在 jQuery 中检查复选框是否被选中?

    我需要检查checked复选框的属性 并使用 jQuery 根据选中的属性执行操作 例如 如果age复选框被选中 然后我需要显示一个文本框来输入age 否则隐藏文本框 但下面的代码返回false默认情况下 if isAgeSelected
  • 如何仅在第一次访问时弹出模态窗口

    我有一个模式窗口 当您访问某个页面时会弹出 访客必须选择我同意或我不同意 我需要一个漂亮的小 jquery 脚本 它会记住谁之前访问过该页面并同意 这样他们每次访问该页面时就不会弹出模式 有人可以推荐一个好的脚本来使用吗 这是代码 div
  • Javascript / jQuery - 转换特殊 html 字符

    我有一个pre元素中包含一些 html 代码 该代码中有特殊字符 例如 lt 所以它不会破坏页面 然后我有一个 javascript 函数 它获取此 pre 元素的内容 突出显示它 使用 codemirror 并用突出显示的文本替换元素内容
  • Angular 5 中 Observable.ForkJoin 的重复 Http 请求

    我有一个 Angular 5 应用程序 组件中包含以下代码 ngOnInit Observable forkJoin this highlightedInsight this insightService getHighlightedIns

随机推荐

  • 使用 C# 在 Windows 应用程序中从一种表单检索值到另一种表单 [重复]

    这个问题在这里已经有答案了 我有一个登录表单和更改密码表单 我想检索登录时在登录表单中输入的用户名值 我创建了一个名为 RetUserName 的属性 如下所示 public partial class frmLogin Form priv
  • 在 $bind_param() 中动态绑定参数; mysqli

    我有 DB 类 它处理将对数据库进行的所有查询 我的 mysqli 准备工作正常 bind param 也工作正常 但问题是我想动态定义变量类型 这是我的代码 public function query sql params array t
  • Android File.listFiles 不显示目录内的所有文件

    我正在使用 Android Emulator 2 2 版本来开发一个小应用程序 我应该列出目录下的所有图像文件 jpg 文件 我通过 ADB puash 命令将文件复制到 data 示例 data 1 jpg 现在 我创建一个 File 对
  • php switch 语句 int = 0 时出错

    我在 php switch case 中遇到问题 当我设置 数字 0它应该首先运行case但这里代码返回10 20K这是第二种情况 我检查了比较运算符 在 if else 情况下测试了它们 它们返回正确的值 但这里第一种情况不运行 数字 0
  • 浮点运算:误差求和与乘法

    我试图理解这个简单示例背后的浮点运算 理论上 这两种代码在算术上是等价的 但显然一系列加法比简单的乘法增加了更多的错误 s 0 0 for i in range 10 s 0 1 print s print 30f s 0 99999999
  • 使用 VarArgs 隐式定义

    我刚刚注意到implicit def似乎在 var args 中不起作用 例如 我有一个java函数 它需要java lang Byte 作为其参数输入 该函数调用被一个 scala 方法包围 该方法采用scala Byte implici
  • 这种即发即忘的方法正确吗?

    我已经实施了Instagram API 实时更新 基本上 当根据我的订阅添加新图像时 它们会向我提供的 url 发出 POST 请求 他们说 您应该在 2 秒超时内确认 POST 如果您需要对收到的信息进行更多处理 您可以在异步任务中执行此
  • 将反应表行数据传递给反应模式

    作为 React 新手 我很难将数据从反应表传递到 编辑 模式 并且似乎无法找到类似问题的解决方案 数据通过 Axios API 调用从数据库中获取并呈现在反应表中 我需要将渲染行的数据传递到模式 以便随后发出放置请求并将数据更新到服务器
  • Groovy 子类调用访问闭包的超类方法

    我有一个很棒的超类 如下所示 class AGroovyClass private String str hello void printString int nTimes nTimes times println str 和子类 clas
  • mac os jdk 1.8 问题 vlc 控制 JAWT 无法加载

    JavaVM WARNING JAWT GetAWT must be called after loading a JVM Exception in thread AWT EventQueue 0 java lang Unsatisfied
  • 使用 MySQL C API - 使用准备好的语句检查插入行是否成功

    我开始学习如何使用 MySQL C API 并遇到了准备好的语句 我以前没有在其他语言中使用过这些 所以这对我来说都是新的 我在网上查了一下 我已经弄清楚如何使用准备好的语句从SELECT查询 现在我想做的是INSERT一些数据 看看是否成
  • 返回与值部分匹配的记录

    我正在尝试让查询工作 该查询从表单控件获取值 有时只是字符串的第一部分 我遇到的问题是 它仅在输入完整字符串时返回记录 即在姓氏框中 我应该能够输入 gr 它会显示 绿色的 灰色的 格雷厄姆 但目前除非使用完整的搜索字符串 否则它不会显示任
  • 在 Ruby 中发出超时的 HTTP HEAD 请求

    在 Rails 应用程序中 我想对资源 用户提供的 URL 发出 HTTP HEAD 请求 以确保它存在 我还想要一个超时 以确保该方法在花费合理的等待时间后失败 实现此目的最直接的方法是什么 如果可能 使用标准库 试试这个片段 requi
  • 使用 A* 的启发式方法来查找增益最高的路径

    假设我想改变 A 中的逻辑 试图找到最有用的路径 即增益最高的路径 而不是找到最短路径 即成本最低的路径 就我而言 目标并不固定为唯一的结束节点 节点定义为具有距离的任何节点B从起点开始 在普通版本 找到最短路径 中 我需要不要高估成本 即
  • PowerShell FTPS 上传失败并显示“系统错误”。

    问题 客户要求我们将从系统中提取的数据上传到他们的 box com 平台 而不是我们普通的 SFTP 实用程序 我有 box com 凭据 并且知道他们需要 FTPS 而不是 SFTP 并且需要被动模式 我抄袭了一个片段ThomasMaur
  • Groovy 中的测试类在 Kotlin 中看不到测试类

    我有一个带有 Kotlin 插件的 gradle 项目 在我的项目中 我使用 groovy 和 Spock 进行测试 用 Kotlin 编写的测试中使用的实用程序类之一 我将其放入 src test kotlin 我试图使用 groovy
  • 对 solr 输入字段进行哈希处理

    我想方便地搜索我们无法以非散列或加密形式索引或存储的字段 有没有办法告诉 solr 在与索引进行比较之前对特定字段进行哈希 或加密 简而言之 我认为这并不容易 这取决于您需要什么级别的安全性 作为一种通用 简单的解决方案 您可以将整个索引存
  • 在 ASP.NET MVC RC1 中对强类型视图使用“添加视图”对话框时出现问题

    我喜欢随 RC1 发布的新 添加视图 对话框 如果您指定视图数据类 它会为您生成一个支架视图 它似乎与我的解决方案中的项目中定义的类配合得很好 我的一些域类继承自外部程序集中定义的基类 并在我的 Web 项目中引用 当我指定这些域类之一时
  • 使用 MS 批处理文件将程序的输出分配给变量

    我需要使用 MS 批处理文件将程序的输出分配给变量 所以在 GNU Bash shell 中我会使用VAR application arg0 arg1 我需要在 Windows 中使用批处理文件实现类似的行为 就像是set VAR appl
  • 使页眉和页脚文件包含在多个 html 页面中

    我想创建包含在多个 html 页面上的通用页眉和页脚页面 我想使用 JavaScript 有没有办法只使用 html 和 JavaScript 来做到这一点 我想在另一个 html 页面中加载页眉和页脚页面 你可以通过以下方式完成此操作jq