8

Is there a way to include all the meta tag, link rel and script src includes in one file, and then require that file?

The reason I ask is because I have like 10-15 lines that i am copying into every file and figured there might be another way.

I put everything in one file and tried the Jquery load function, but to no avail.

Thanks

NorCalKnockOut
  • 870
  • 3
  • 10
  • 26

6 Answers6

11

Create a head.html file like this:

<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- Meta -->
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<!-- JS -->
<script type="text/javascript" src="js/lib/jquery-1.11.min.js" ></script>
<script type="text/javascript" src="js/lib/angular.min.js"></script>
<title>Your application</title>

Now include head.html in your HTML pages like this:

<head>
   <script type="text/javascript" src="js/lib/jquery-1.11.1.min.js" ></script>
   <script>
       $(function(){ $("head").load("head.html") });
   </script>
</head>
drac_o
  • 427
  • 5
  • 11
benscabbia
  • 17,592
  • 13
  • 51
  • 62
  • Okay, i did this and for a split second it shows the page without any css then it all loads. Is there a way to prevent that? – NorCalKnockOut Oct 28 '14 at 21:47
  • @user2891803 try and put the css `` on top (above all) – benscabbia Oct 28 '14 at 21:49
  • @user2891803 no problem. I grabbed the code from [here](http://stackoverflow.com/questions/18712338/make-header-and-footer-files-to-include-multiple-html-pages). There are many ways you can achieve what you want, so you should experiment until your happy with the performance. The issue with JS is that it runs on client side so there will only be a little delay while the code is executing on your machine. You should definitely look into PHP. – benscabbia Oct 28 '14 at 21:57
  • ahh i figured it out. Im using bootstrap so i left that in html file and then loaded the rest in the header and it works without that little flash of non css. Thanks again @gudthing – NorCalKnockOut Oct 28 '14 at 21:57
  • what is the purpose of `$(function(){})`? It seems working without this. – WCMC May 14 '19 at 20:45
2

If you are wanting to use jquery you can use the get function and then append your files values to the tag.

It would look something like the following:

  //don't forget to include the file extention in the file path
  var include = "pathOfYourIncludeFile";

    $.get(include, function(data){//begin jquery get function

 //append the data returned from your file  and append it to the head
 $("head").append(data);




 });//end jquery get function
Larry Lane
  • 2,141
  • 1
  • 12
  • 18
1

With only js and html you have 2 ways:

1) create a js script and load it every page (not so much different from now but copy much less rows)

2) just do 1 page and refresh part of the content (or whole body) with an Ajax call.

What are you looking for it's a server side pre-processing that "merge" parts so it's very simple to do with php (include), java/jsp, .net and so on.

MrPk
  • 2,862
  • 2
  • 20
  • 26
0

Maybe you can use php echo to every page. for example: <?php include 'path/to/your/file'; ?>

0

Best solution especially for crawlers and robots is to run everything on server side. Running on client side will make that crawlers will not see that data. So better solution is to <?php include 'file'; ?>

Pilot
  • 43
  • 1
  • 6
0

I would use jquery append to append only the head code that you want to share in all files. Add this to your head.

<script>
        (async function () {
            $.get("CustomHead.html", function (data) {
                $("head").append(data);
            });
        })();
    </script>

And then you can create the CustomHead.html which will be spreaded to all the html files you added the above script

<meta property="og:site_name" content="" />
    <!-- website name -->
    <meta property="og:site" content="" />
    <!-- website link -->
    <meta property="og:title" content="" />
    <!-- title shown in the actual shared post -->
Zubeir
  • 61
  • 3
  • 7