时间戳

首页 > 解决方案 > 使用 html 或客户端脚本从另一个文本文件导入元素

javascript - 使用 html 或客户端脚本从另一个文本文件导入元素

问题描述

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

我知道object如果公共代码在该body部分中，您可以使用它来完成此操作，但这不适用于head.

还有一件事是这些网页托管在 GitHub Pages 上，所以我只能使用静态页面和客户端脚本。如果服务器端脚本可用，例如，您可以使用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"/>

标签： javascripthtmlhtml-head

解决方案

通过上面的评论和我的一些研究，我设法想出了以下脚本来将元素添加到网页的head. 一个需要JQuery，另一个使用 vanilla JavaScript：

查询：

$(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();

推荐阅读