如何避免每个 html 页面中重复页眉和页脚代码

2024-01-11

我有大约十个 html 页面,每个页面也有相同的页眉和页脚标记,我可以有一个包含完整页眉和页脚的页面吗,我将从其他 html 页面引用该特定页面。


如果您不关心禁用了 JavaScript 的用户,或者正在使用某些移动平台,则可以使用 JavaScript 来完成此操作。

headerfooter.js

window.onload = function ()
    {
        var header = document.getElementById('header');
        var footer = document.getElementByID('footer');

        header.innerHTML = "<h1>My website</h1><h2>Rules</h2>";
        footer.innerHTML = "<small>This code is in the public domain</small>";
    }

页面.html

<html>
  <head>
    <script type="text/javascript" src="headerfooter.js"></script>
  </head>
  <body>
    <div id="header"></div>
    ... Your content ...
    <div id="footer"></div>
  </body>
</html>

但不要这样做,这对用户不友好,而且不专业。只需坚持使用 php,或构建一个稍后不需要编辑的可靠模板即可。

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

如何避免每个 html 页面中重复页眉和页脚代码 的相关文章

  • 在选择下拉列表中选择特定选项时添加输入框

    我需要在选择选项时将输入添加到选择选项中 每当用户选择 其他 时 就会出现一个输入框供用户输入数据 HTML
  • HTML5 Audio Element 无法在 IOS 11 设备上的 safari 中播放 mp3 直播

    我是一家广播公司的网络开发人员 自 iOS 11 发布以来 我们收到了一些用户投诉 称我们的音频直播流无法再在 IOS 11 设备上播放 为了将流嵌入我们的网站 我们使用 HTML5 AudioElement 在 iOS 11 的 iPho
  • 如何在 vuejs 中防止/停止点击传播

    我有一个递归列表 树 每个元素都有一个 click sayHello el id 现在的问题是 因为它是一个嵌套列表 例如 list element 0 01 list el 1 01 list el 2 01 list el 1 02 l
  • 如何让更大的布局适合小设备屏幕?

    我有一个小问题meta viewport元素 问题是我的布局min width比我想要使用的许多屏幕分辨率都要大 所以将其设置为 没有帮助 结果我得到的页面必须缩小以适应设备宽度 如果我什至添加像 它也不起作用 发现了一个黑客来自CSS 技
  • jQuery 删除函数真的删除 Dom 元素吗?

    我真的想知道 jQuery 是否remove http api jquery com remove 函数确实从 DOM 中删除元素 首先 我看了here https stackoverflow com questions 2185760 j
  • 如何实现 chromecast 对 html5 播放器的支持

    我使用js和html5设计了一个具有一些自定义功能的html5播放器 现在我需要在html5播放器上添加chromecast选项 例如https raw githubusercontent com kim company videojs c
  • CSS 属性选择器中的 [att~=val] 与 [att*=val] 有何不同?

    也许我错过了一些东西 但它们看起来很相似 例如 如果您使用 a alt thumb or a alt thumb 我可以通过哪些不同方式缩小选择范围 我的理解是 为您提供了引号中的部分匹配 而 为您提供了部分匹配 我将稍微修改一下代码 但由
  • iPhone 地址栏阻止了 HTML 页面标题按钮?

    我有一个带有两个标题按钮的移动网站 在 iPhone 上的纵向模式下 效果很好 我可以按按钮 问题是这样的 当我切换到纵向模式并尝试点击按钮时 本机 iPhone 地址栏就会显示 它位于标题上方 因此我无法按按钮 图片显示了问题 按一个按钮
  • Google 字体(上面有空格)无法在 IE7/IE8 上呈现

    有谁知道为什么 IE7 IE8 不会渲染 Google 字体 如果名称上有空格 您可以在这里查看演示 http jsfiddle net fYzAb 1 http jsfiddle net fYzAb 1 完全相同的两个标签 一个使用 Os
  • 如何强制 中的两个元素始终保持在同一行

    代码非常简单 table style width 100 border 0 background color white cellpadding 0 cellspacing 0 tr td style border 0 padding 0
  • PHP 邮件功能不发送任何消息[重复]

    这个问题在这里已经有答案了 我对问题所在感到困惑 在使用时没有收到任何电子邮件mailphp 函数 PHP HTML
  • 生成基于内联 HTML 样式的样式表?

    一段时间以来 我一直致力于对网站的不同部分进行样式设计 但是我尚未将内联样式放入样式表中 我想知道是否存在一个工具可以解析 HTML 文件并从中生成样式表 例如 这是我网站的一个片段 div class block style border
  • IE7内容可编辑自动换行

    我有以下代码 div class editable This is test text This is test text This is test text This is test text This is test text Thih
  • 使用 AppleScript 单击 safari 网页按钮

    我想弄清楚如何单击网页中的按钮 例如 点击谷歌网页中的 手气不错 按钮 这是我尝试过的 tell application Safari make new document with properties URL https www goog
  • 从 Django 基于类的视图的 form_valid 方法调用特殊(非 HTTP)URL

    如果你这样做的话 有一个 HTML 技巧 a href New SMS Message a 点击新短信打开手机的本机短信应用程序并预 先填写To包含所提供号码的字段 在本例中为 1 408 555 1212 以及body与提供的消息 Hel
  • CSS 背景在 iOS 中拉伸以填充高度,但滚动上有空白

    这个 CSS 让我的背景在 iOS 中填充 100 的屏幕高度 但有一个小问题 当你向下滚动时 最初有空白 然后当你松开手指并停止滚动时 背景图像会 调整 并填充 100再次屏幕高度的 如果您继续滚动 该问题不会在同一页面上再次出现 只是第
  • Knockout.js:有条件绑定div的title属性

    我的页面上有一个 viewModel 它保存一些设备当前状态概述的数据 到目前为止 除了一个问题之外 一切都运行良好 我需要根据 viewModel 中的另一个值设置 div 元素的 title 属性 我知道您基本上可以像这样设置 titl
  • 推迟未使用的 CSS

    我有一个关键的 CSS 流程 可以防止页面首屏内容出现无样式内容闪现 FOUC 我陷入了 推迟未使用的 CSS 这一点 Google PageSpeed 见解 灯塔 和 或 Chrome 的性能审核强调了这一点 我已经阅读了其他文章 但它们
  • JavaScript - 替换 html 字符串中的特定单词索引

    我在 JS 字符串操作方面面临着一项具有挑战性的任务 有一个 HTML 字符串 我需要在其中替换特定单词索引处的单词 单词索引是忽略 HTML 标签时单词的编号 例如 下面是 HTML 字符串 span style font family
  • 使用 JavaScript 和 HTML 打印表情符号

    为什么这有效 p x1f604 p 而这并没有 document getElementById emoji innerHTML String fromCharCode parseInt 1f604 16 JS 术语中的 char 实际上是一

随机推荐