通过Jquery将HTML的头部加载到多个页面
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了通过Jquery将HTML的头部加载到多个页面相关的知识，希望对你有一定的参考价值。
我正在尝试通过Jquery将html文件的头部添加到多个页面。我不想为了节省时间而在每个页面的头部重复标签。要清除，我想要这部分：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
是模块化的，因此我可以在每个HTML页面中包含它。我试图使用load()方法，但不知道如何使其部分加载到HTML中。
我需要看一个解决问题的例子，这将帮助我避免浪费时间复制和粘贴头部。
添加了以下我需要的解决方法：
$(document).ready(function()
// $( "head" ).load( "./pages/partials/_head.html" );
console.log("Loading...");
var headMeta = `
<title>NetFlix - Load </title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- FontAwesome 5 -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.1/css/all.css"
integrity="sha384-O8whS3fhG2OnA5Kas0Y9l3cfpmYjapjI0E4theH4iuMD+pLhbf6JI0jIMfYcK3yZ" crossorigin="anonymous">
<!-- Custom CSS -->
<link rel="stylesheet" href="./assets/css/main.css">`;
$("head").append(headMeta);
);
您不能。
几乎您拥有的所有东西之一：
- 不是元素，因此无法插入DOM
- 带有可选开始/结束标签的必选元素，该元素已经在DOM中，因此无法再次插入
- [除非该元素在文档的原始HTML中，否则它对浏览器没有任何影响（即，在生成原始DOM时浏览器会注意，但是之后使用javascript对其进行更改或添加无效）
[您需要在原始HTML文档传送到浏览器之前提供这些数据。
如果要自动执行此操作，则可以在服务器端脚本或构建脚本中使用模板或包含系统。您不能通过客户端JavaScript（在有或没有jQuery的帮助下）有效地执行此操作。
我建议将其直接包含在服务器上。例如，如果您使用的是php，则只需使用include
让我们假设以下内容：
index.php
page1.php
page2.php
partials/header.html
在partials/header.html文件中，您只需将内容从上方放置。在所有其他文件中，您将使用
<?php include('partials/header.html') ?>
<body>
...
</body>
</html>
在服务器上执行此操作的原因是，如果缺少部分，浏览器将首先“完成”您的html，也就是说，在这种情况下，它已经添加了<head>标签。
您应该能够找到与所有语言相似的功能。
编辑：如果只允许您在前端使用Javascript，我认为复制标头是最简单的。另一种选择是简单地使用占位符，例如%HEADER%，并使用一个小的脚本（即python），该脚本读取所有.html文件并用内容替换%HEADER%，然后保存html文件。如果这也不是您想要的，我将尝试以下操作：
<!DOCTYPE html>
<html lang="en">
<head>
<script src="jquery.js"></script>
<script>$(function() $.get('partials/header.html', function(content) $('head').html(content);); );</script>
</head>
以上是关于通过Jquery将HTML的头部加载到多个页面的主要内容，如果未能解决你的问题，请参考以下文章
HTML里用iframe引入一个头部页面JS下拉菜单显示不全
javascript 代码是不是应该始终加载到 html 文档的头部？