How can you import multiple stylesheets and bootstrap libraries into an HTML document at once?

Question

I am building a website, and I have about 100 pages with the same information below in the head of the files.

    <!--CSS imports-->
    <link rel="stylesheet" type="text/css" href="../PrimaryCSS.css">
    <link rel="stylesheet" type="text/css" href="../NavigationBarCSS.css">
    <link rel="stylesheet" type="text/css" href="../FooterCSS.css">

    <!--Bootstrap imports-->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="../bootstrap-3.3.4-dist/jquery/1.11.1/jquery.min.js"></script>
    <link rel="stylesheet" href="../bootstrap-3.3.4-dist/css/bootstrap.min.css">
    <script src="../bootstrap-3.3.4-dist/js/bootstrap.min.js"></script>

    <!--HTML Imports for the footer and navigation bar-->
    <script src="../fileLoaderMain.js"></script>

The Problem:
The main issue with this is that if I want to change the bootstrap libraries, I have to go into each file and change the library paths. The other issue is that if I want to add or remove a stylesheet, I have to go into each html file to add or remove it.

The Question:
Is there a way I can put all of this information in one file and then have a line like <script> src="importHead.js" </script> that imports everything that needs to be in the head of the file?

For example, in the "fileLoaderMain.js" file, I have javascript functions that import the html for the page navigation bar and footer. The functions look like this:

$(function () {
    $("#navbarComponentMainPagesID").load("../navbarComponentMainPages.html");
});
$(function () {
    $("#footerComponentID").load("../footerMainComponent.html"); 
});

Then in the HTML file, I call the function which imports the navigation bar and footer like this. The divs look like this:

<div id="navbarComponentMainPagesID"></div>
<div id="footerComponentID"></div>

That way, I only have to make changes to the navigation bar and footer in one file.

What I Tried:
I tried to do something similar using javascript functions to solve my current problem, but it didn't work. I put all of the imports (stylesheets and libraries) into a file. Wrote a javascript function to import them and added a div to show where the files should be imported in the main HTML file. But that didn't work, and I'm guessing that's because you can't import javascript and jquery files using divs.

I feel like this is probably a simple problem, but I haven't done a lot of complex things with web development.

@BramVanroy Ohhh...okay. I'll look it up. I haven't worked with it, but I don't mind learning something new. Thanks! — JustBlossom, May 28 '17 at 18:41
@BramVanroy php is just one of many server side languages that could be used. Would depend on what OP has available also — charlietfl, May 28 '17 at 18:42
@charlietfl True, but since OP is new to it all, PHP might not be a bad start. — Bram Vanroy, May 28 '17 at 18:47

score 3 · Accepted Answer · answered May 28 '17 at 18:53

3

You can try something like this:

let stylesheets = [
  'http://link-to-stylesheet-.com/css?family=somethingsomethingsomething',
  'http://link-to-stylesheet-.com/css?another-stylesheet',
  'http://link-to-stylesheet-.com/css?family=someding',
  'http://link-to-stylesheet-.com/css?someotherstylesheet',
  'http://link-to-stylesheet-.com/css?stylesheetnumber100'
];

function createStylesheet( href ) {
  let link = document.createElement('link');
  link.type = 'text/css';
  link.rel = 'stylesheet'
  link.href = href;
  return link;
}

// an array of stylesheet links 
const appendStylesheets = stylesheets.map(function (sheet) {
  const createdLink = createStylesheet(sheet);
  return createdLink;
});

appendStylesheets.forEach(function (link) {
  document.getElementsByTagName('head')[0].appendChild(link);
});

answered May 28 '17 at 18:53

Chris

803
1
6
17

Cool, thanks! I got it to work with the stylesheets. Will this work for javascript files too (i.e. the bootstrap libraries)? I'm playing with it now, but wanted to ask if it would work before I went too far down a rabbit hole. – JustBlossom May 28 '17 at 19:13
Yes it will work with libraries as well.const bootst = document.createElement("script"); and add the src property bootst.src = "https:\/\/maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"; then append that into the (Remember to include your bootstrap css before the js) – Chris May 28 '17 at 19:39
@Chis Thanks. Haven't been able to get the javascript to work But the CSS works so I marked the answer. Thanks again! – JustBlossom May 28 '17 at 20:56

capcj · Answer 2 · 2017-05-28T18:48:59.110

You will create an header.html or header.php where each file you will load them with some backend/frontend language.

Your javascript routine it's good. I prefer to bind them with backend, but the javascript approach is valid too. But your problem is because you're not creating valid objects to add into DOM, look an example:

CSS How to load up CSS files using Javascript?

var cssId = 'myCss';  // you could encode the css path itself to generate id..
if (!document.getElementById(cssId))
{
    var head  = document.getElementsByTagName('head')[0];
    var link  = document.createElement('link');
    link.id   = cssId;
    link.rel  = 'stylesheet';
    link.type = 'text/css';
    link.href = 'http://website.com/css/stylesheet.css';
    link.media = 'all';
    head.appendChild(link);
}

Javascript loaded with jQuery Load JavaScript dynamically

$.getScript('http://maps.googleapis.com/maps/api/js?libraries=geometry&sensor=true', function(data, textStatus){
   console.log(textStatus, data);
   // do whatever you want
});

Javascript vanilla solution

var script = document.createElement('script');
script.src = something;
script.onload = function () {
    //do stuff with the script
};

document.head.appendChild(script);

I don't recommend use object tags because the definition of them is inside the body element, maybe creating issues with SEO and other validations.

score 0 · Answer 3 · answered May 28 '17 at 19:27

HTML import is a native HTML solution:

<link rel="import" href="http://example.com/elements.html">

Unfortunly, it's only supported by Chrome and Opera.

In this case I prefer to use PHP and import the desired template part using:include 'filename' or require'filename'. It's much cleaner and easy to mantain

How can you import multiple stylesheets and bootstrap libraries into an HTML document at once?

3 Answers3