使用 html 或客户端脚本从另一个文本文件导入 <head> 元素

Question

我目前正在清理一个网站的代码。我注意到每个页面的 head 元素实际上是相同的。我想知道是否可以将所有相同的元素放入一个文本文件中，然后在每个 html 文件中以某种方式导入该文本文件的内容。

我知道如果通用代码在 body 部分，您可以使用 object 来完成此操作，但这不适用于 head。

还有一件事是这些网页托管在 GitHub 页面上，所以我只能使用静态页面和客户端脚本。例如，如果服务器端脚本可用，您可以使用 php import 来完成此操作。

如果有帮助，这是我要导入每个页面的通用代码：

<meta name="description" content="A central resource for PC optimization information."/>
<meta name="keywords" content="Technology,PC,Computer,Optimization,Tweak,Guide,Tweaking,Microsoft,Windows,Nvidia,Intel,AMD"/>

<link rel="stylesheet" type="text/css" media="all" href="pi.css"/>
<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
<meta name="MSSmartTagsPreventParsing" content="true"/>
<meta name="referrer" content="no-referrer"/>

<!-- Icons -->
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png?v=20191102"/>
<link rel="apple-touch-icon" href="apple-touch-icon.png?v=20191102"/>
<link rel="mask-icon" href="safari-pinned-tab.svg?v=20191102" color="#5bbad5"/>
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png?v=20191102"/>
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png?v=20191102"/>
<link rel="shortcut icon" href="favicon.ico?v=20191102"/>
<link rel="manifest" href="site.webmanifest?v=20191102"/>
<meta name="msapplication-TileColor" content="#2d89ef"/>
<meta name="theme-color" content="#ffffff"/>

Answer 1

根据上面的评论和我的一些研究，我设法想出了以下脚本来向网页的 head 添加元素。一个需要 JQuery，另一个使用原版 JavaScript:

JQuery:

$(function(){
 $("head").load("../../aa_common_resources/common_head_elements.txt")
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

原版 JS：

var externaltextfile = '../../aa_common_resources/common_head_elements.txt'
var request = new XMLHttpRequest();
request.open('GET', externaltextfile, true);

request.onload = function() {
 document.getElementsByTagName("head").item(0).insertAdjacentHTML('beforeend', request.responseText);
   };
request.send();

使用 html 或客户端脚本从另一个文本文件导入 <head> 元素

Import <head> elements from another text file with html or client-side scripting

html

javascript

html-head