使页眉和页脚文件包含在多个 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 页面中 的相关文章

  • jQuery Blur() 在 Chrome 上不起作用

    我在 MacOSX 上运行这个http jsfiddle net q84wv http jsfiddle net q84wv on Chrome最新版本 它不会工作 在 Firefox 上运行时它工作得很好 有什么线索吗 假设您想要aler
  • 使用 jQuery 仅从字符串末尾修剪空格

    我知道 jQuery trim 函数 但我需要的是一种仅从字符串末尾修剪空格的方法 而不是开头 So str this is a string 会成为 str this is a string 有什么建议么 Thanks 您可以使用正则表达
  • 带 CSS 网格的等宽侧边栏列

    是否可以让左右列具有相同的宽度 而中间列占据剩余空间 我不想设置像这样的百分比grid template columns 20 60 20 因为并不总是确定这些列的内容是什么 Flexbox 和表格似乎没有解决这个问题的方法 所以我再次尝试
  • CSS:将加载指示器放置在屏幕中央

    如何将加载指示器放置在屏幕中央 目前我正在使用一个小占位符 它似乎工作得很好 但是 当我向下滚动时 加载指示器保持在该预定义位置 我怎样才能让它跟随滚动 使其始终位于顶部 busy position absolute left 50 top
  • 只需编辑 .css 即可更改

    有 4 div class myField 每一个都在另一个之下 http jsfiddle net urielz 6Mdmd http jsfiddle net urielz 6Mdmd 我想将其视图更改为两对情侣面对面 就像结果一样 h
  • ReactJS:从没有 onChange 事件的 props 中选择默认值?

    所以 我只是想知道我是否绝对需要在 React 中的选择组件上有一个 onChange 事件处理程序 我有一个道具传递我想要选择的选项的默认值 如果我有的话 它就没有问题
  • 在 vue.js 模板中包含外部脚本

    我是 Vue js 和 web pack 的新手 所以我决定使用 vue cli webpack 来构建初始应用程序 我试图包含一个外部脚本 例如组件 不需要的模板中 但是 Vue 警告这是不允许的 我的 index html 文件与最初生
  • Chrome Javascript 调试器暂停时不会重新加载页面

    有时 当我在 Chrome 中调试某些 javascript 并且暂停了 javascript 时 如果我尝试重新加载页面 chrome 只会 继续 调试器 单步执行到下一个断点 似乎没有任何方法可以强制 javascript 完全停止运行
  • 捕获 XSS(跨站脚本)攻击的最佳正则表达式(Java 中)?

    杰夫实际上在净化 HTML http refactormycode com codes 333 sanitize html 但他的示例是用 C 编写的 而我实际上对 Java 版本更感兴趣 有人有更好的 Java 版本吗 他的示例是否足以直
  • 将 NPM 包客户端与 nuxt 结合使用

    我对 nuxt 和 javascript 非常陌生 我正在尝试弄清楚如何在客户端使用我的应用程序的依赖项 我将它们列在我的 nuxt config js 中并使用 npm 安装 我也有一个文件 plugins导入它们的目录 不确定这是否好
  • 元素中优先考虑 ngclick 而非 nghref

    tl dr 如何强制 Angular 只执行 ngclick 指令 a 元素而不清空 删除href 我的网站在某些元素上有一些自定义行为 模式打开 位置栏更新等 但对于 SEO 索引我also需要它成为一个 a 元素与href包含有效链接的
  • 为什么我需要 $(document.body) 来使用 Mootools Element 方法扩展 document.body?

    因此 在尝试让我的应用程序在最新的 IE 上运行后 结果发现 IE 不喜欢以下代码 document body getElement className Firefox 和 Chrome 响应良好 但是document bodyIE 上没有
  • iOS 5 中的 webkit-overflow-scrolling: touch "handle" 是否有外观 CSS 规则?

    我有一个元素恰好同时具有 webkit overflow scrolling touch 和 background color black 因此显示滚动位置的 手柄 很难看到 是否有 webkit CSS 样式规则可以改变该 手柄 的外观
  • 通过 vh 和 vw 调整 css 字体大小

    所以我想根据容器的大小自动调整文本的大小 但是如果我使用类似的东西 font size 5vw 看起来不错 但是当我缩小页面时 高度开始变得太小 无论如何 我是否可以根据 vh 和 vw 调整文本大小 例如 如果我只是减小页面的宽度 那么高
  • 在 Google Apps 脚本中的文本前插入换行符

    我需要在 Google 文档中的某些文本之前插入一些换行符 尝试过这种方法但出现错误 var body DocumentApp getActiveDocument getBody var pattern WORD 1 var found b
  • 如何根据所需表单输入的值更改 CSS 样式

    我想知道如何编写 javascript 来改变所需的表单元素的样式 如果它们有价值的话就改变它们 我想要做的是当所需的文本字段为空时 在它们周围有一个彩色边框 并在它们有值时删除边框样式 我想做的是编写一个 javascript 函数来检查
  • CSS 旋转轮在 5 秒后停止?

    我正在使用我在小提琴上找到的 CSS 代码来旋转我的轮子 http jsfiddle net gaby 9Ryvs 7 http jsfiddle net gaby 9Ryvs 7 div margin 20px width 100px h
  • 如何在 JavaScript 中获取浮点数的小数位?

    我想要的是与 Number prototype toPrecision 几乎相反的 这意味着当我有数字时 它有多少位小数 例如 12 3456 getDecimals 4 对于任何想知道如何更快地完成此操作 无需转换为字符串 的人 这里有一
  • 未捕获(承诺中)TypeError:无法读取 null popover.js 的属性“模板”

    当我触发时我注意到一个错误 popover dispose 当我上下滚动页面时 函数会发生错误 并且它会减慢我的页面速度 该函数按其应有的方式运行并关闭弹出窗口 但这就是错误Uncaught in promise TypeError Can
  • 使用 Lodash 将对象键转换为具有键值数量的数组[重复]

    这个问题在这里已经有答案了 我有一个产品对象 products bread 1 milk 2 cheese 2 chicken 1 我想要一个包含产品名称的数组 如下所示 products bread milk milk cheese ch

随机推荐

  • 使用 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