1

I am currently cleaning up a website's code. I've noticed that the head elements for every page is virtually identical. I would like to know if it is possible to put all the elements that are identical into a single text file then, in every html file, import the contents of that text file in some way.

I know that you can use object to accomplish this if the common code is in the body section but this doesn't work for head.

One more thing is that these web pages are hosted on GitHub Pages, so I can only use static pages and client-side scripting. If server-side scripting is available you can, for example, use php import to accomplish this.

If it helps, this is the common code I want to import into every page:

<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"/>
XJDHDR
  • 494
  • 5
  • 15
  • You can, in theory load the header items (aside from JQuery) using an AJAX call. Basically storing your header.html as a single file and then appending it to the body as so: https://stackoverflow.com/questions/11589387/load-txt-file-using-jquery-or-ajax – Bitz Nov 04 '19 at 21:57
  • It depends on the framework. If it is a static page, you can use CMS like OpenCms. You can also use http://api.jquery.com/load/ if planning to add JQuery/JS – Sully Nov 04 '19 at 22:02
  • Does this answer your question? The same approach can be used for other elements [How do I include a JavaScript file in another JavaScript file?](https://stackoverflow.com/questions/950087/how-do-i-include-a-javascript-file-in-another-javascript-file) – Sully Nov 04 '19 at 22:04
  • Sorry for the late reply but thanks for the assistance. I managed to figure out two scripts that will add elements to the webpage's head. – XJDHDR Nov 22 '19 at 02:17

1 Answers1

2

With the comments above and some research on my end, I managed to come up with the following scripts to add elements to the webpage's head. One requires JQuery and the other uses vanilla 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>

Vanilla 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();
XJDHDR
  • 494
  • 5
  • 15