Make header and footer files to be included in multiple html pages

Question

I want to create common header and footer pages that are included on several html pages    I d like to use javascript  Is there a way to do this using only html and JavaScript   I want to load a header and footer page within another html page

User · Answer

It is also possible to load scripts and links into the header   I ll be adding it one of the examples above      lt  --load essentials js-- gt  document write   lt link rel  stylesheet  type  text css  href  css style css    gt     document write   lt link rel  stylesheet  type  text css  href  http   code jquery com ui 1 10 3 themes smoothness jquery-ui css    gt     document write   lt script src  js jquery js  type  text javascript  gt  lt  script gt      document getElementById  myHead   innerHTML     lt span id  headerText  gt Title lt  span gt       lt span id  headerSubtext  gt Subtitle lt  span gt    document getElementById  myNav   innerHTML     lt ul id  navLinks  gt       lt li gt  lt a href  index html  gt Home lt  a gt  lt  li gt       lt li gt  lt a href  about html  gt About lt  a gt       lt li gt  lt a href  donate html  gt Donate lt  a gt  lt  li gt       lt  ul gt    document getElementById  myFooter   innerHTML     lt p id  copyright  gt Copyright  amp copy      new Date   getFullYear       You  All      rights reserved  lt  p gt       lt p id  credits  gt Layout by You lt  p gt       lt p id  contact  gt  lt a href  mailto you you com  gt Contact Us lt  a gt          lt a href  mailto you you com  gt Report a problem  lt  a gt  lt  p gt      lt  --HTML-- gt   lt header id  myHead  gt  lt  header gt   lt nav id  myNav  gt  lt  nav gt  Content  lt footer id  myFooter  gt  lt  footer gt    lt script src  load essentials js  gt  lt  script gt

User · Answer

Aloha from 2018  Unfortunately  I don t have anything cool or futuristic to share with you    I did however want to point out to those who have commented that the jQuery load   method isn t working in the present are probably trying to use the method with local files without running a local web server  Doing so will throw the above mentioned  cross origin  error  which specifies that cross origin requests such as that made by the load method are only supported for protocol schemes like http  data  or  https   I m assuming that you re not making an actual cross-origin request  i e the header html file is actually on the same domain as the page you re requesting it from   So  if the accepted answer above isn t working for you  please make sure you re running a web server  The quickest and simplest way to do that if you re in a rush  and using a Mac  which has Python pre-installed  would be to spin up a simple Python http server  You can see how easy it is to do that here   I hope this helps

User · Answer

Save the HTML you want to include in an  html file   Content html   lt a href  howto google maps asp  gt Google Maps lt  a gt  lt br gt   lt a href  howto css animate buttons asp  gt Animated Buttons lt  a gt  lt br gt   lt a href  howto css modals asp  gt Modal Boxes lt  a gt  lt br gt   lt a href  howto js animate asp  gt Animations lt  a gt  lt br gt   lt a href  howto js progressbar asp  gt Progress Bars lt  a gt  lt br gt   lt a href  howto css dropdown asp  gt Hover Dropdowns lt  a gt  lt br gt   lt a href  howto js dropdown asp  gt Click Dropdowns lt  a gt  lt br gt   lt a href  howto css table responsive asp  gt Responsive Tables lt  a gt  lt br gt    Include the HTML  Including HTML is done by using a w3-include-html attribute   Example       lt div w3-include-html  content html  gt  lt  div gt    Add the JavaScript  HTML includes are done by JavaScript        lt script gt      function includeHTML           var z  i  elmnt  file  xhttp          loop through a collection of all HTML elements          z   document getElementsByTagName             for  i   0  i  lt  z length  i              elmnt   z i             search for elements with a certain atrribute            file   elmnt getAttribute  w3-include-html            if  file                make an HTTP request using the attribute value as the file name              xhttp   new XMLHttpRequest              xhttp onreadystatechange   function                 if  this readyState    4                  if  this status    200   elmnt innerHTML   this responseText                 if  this status    404   elmnt innerHTML    Page not found                     remove the attribute  and call this function once more                  elmnt removeAttribute  w3-include-html                  includeHTML                                         xhttp open  GET   file  true             xhttp send                exit the function              return                               lt  script gt    Call includeHTML   at the bottom of the page   Example   lt  DOCTYPE html gt   lt html gt   lt script gt  function includeHTML       var z  i  elmnt  file  xhttp      loop through a collection of all HTML elements      z   document getElementsByTagName         for  i   0  i  lt  z length  i          elmnt   z i         search for elements with a certain atrribute        file   elmnt getAttribute  w3-include-html        if  file            make an HTTP request using the attribute value as the file name          xhttp   new XMLHttpRequest          xhttp onreadystatechange   function             if  this readyState    4              if  this status    200   elmnt innerHTML   this responseText             if  this status    404   elmnt innerHTML    Page not found                 remove the attribute  and call this function once more              elmnt removeAttribute  w3-include-html              includeHTML                                  xhttp open  GET   file  true         xhttp send            exit the function          return                lt  script gt   lt body gt    lt div w3-include-html  h1 html  gt  lt  div gt    lt div w3-include-html  content html  gt  lt  div gt     lt script gt  includeHTML     lt  script gt    lt  body gt   lt  html gt

User · Answer

You could also put   load essentials js     x000D   x000D  document getElementById  myHead   innerHTML   x000D     lt span id  headerText  gt Title lt  span gt   x000D       lt span id  headerSubtext  gt Subtitle lt  span gt    x000D  document getElementById  myNav   innerHTML   x000D     lt ul id  navLinks  gt   x000D       lt li gt  lt a href  index html  gt Home lt  a gt  lt  li gt   x000D       lt li gt  lt a href  about html  gt About lt  a gt   x000D       lt li gt  lt a href  donate html  gt Donate lt  a gt  lt  li gt   x000D       lt  ul gt    x000D  document getElementById  myFooter   innerHTML   x000D     lt p id  copyright  gt Copyright  amp copy      new Date   getFullYear       You  All  x000D       rights reserved  lt  p gt   x000D       lt p id  credits  gt Layout by You lt  p gt   x000D       lt p id  contact  gt  lt a href  mailto you you com  gt Contact Us lt  a gt      x000D       lt a href  mailto you you com  gt Report a problem  lt  a gt  lt  p gt    x000D   lt  --HTML-- gt  x000D   lt header id  myHead  gt  lt  header gt  x000D   lt nav id  myNav  gt  lt  nav gt  x000D  Content x000D   lt footer id  myFooter  gt  lt  footer gt  x000D   x000D   lt script src  load essentials js  gt  lt  script gt  x000D   x000D   x000D

User · Answer

You can accomplish this with jquery     Place this code in index html   lt html gt   lt head gt   lt title gt  lt  title gt   lt script     src  https   code jquery com jquery-3 3 1 js      integrity  sha256-2Kok7MbOyxpgUVvAk HJ2jigOSYS2auK4Pfzbm7uH60       crossorigin  anonymous  gt   lt  script gt   lt script gt     function          header   load  header html           footer   load  footer html          lt  script gt    lt  head gt   lt body gt   lt div id  header  gt  lt  div gt   lt  --Remaining section-- gt   lt div id  footer  gt  lt  div gt   lt  body gt   lt  html gt    and put this code in header html and footer html  at the same location as index html   lt a href  http   www google com  gt click here for google lt  a gt    Now  when you visit index html  you should be able to click the link tags

User · Answer

another approach made available since this question was first asked is to use reactrb-express  see http   reactrb org   This will let you script in ruby on the client side  replacing your html code with react components written in ruby

User · Answer

I think  answers to this question are too old    currently some desktop and mobile browsers support HTML Templates for doing this   I ve built a little example    Tested OK in Chrome 61 0  Opera 48 0  Opera Neon 1 0  Android Browser 6 0  Chrome Mobile 61 0 and Adblocker Browser 54 0 Tested KO in Safari 10 1  Firefox 56 0  Edge 38 14 and IE 11    More compatibility info in canisue com  index html     lt  DOCTYPE html gt   lt html lang  en  gt   lt head gt       lt meta charset  UTF-8  gt       lt title gt HTML Template Example lt  title gt        lt link rel  stylesheet  href  styles css  gt       lt link rel  import  href  autoload-template html  gt   lt  head gt   lt body gt    lt div class  template-container  gt 1 lt  div gt   lt div class  template-container  gt 2 lt  div gt   lt div class  template-container  gt 3 lt  div gt   lt div class  template-container  gt 4 lt  div gt   lt div class  template-container  gt 5 lt  div gt    lt  body gt   lt  html gt    autoload-template html   lt span id  template-content  gt      Template Hello World   lt  span gt    lt script gt      var me   document currentScript ownerDocument      var post   me querySelector    template-content          var container   document querySelectorAll    template-container            alert  container length        for i 0  i lt container length   i              container i  appendChild  post cloneNode  true             lt  script gt    styles css   template-content       color  red      template-container       background-color  yellow      color  blue      Your can get more examples in this HTML5 Rocks post

User · Answer

I add common parts as header and footer using Server Side Includes  No HTML and no JavaScript is needed  Instead  the webserver automatically adds the included code before doing anything else   Just add the following line where you want to include your file    lt  -- include file  include head html  -- gt

User · Answer

Must you use html file structure with JavaScript   Have you considered using PHP instead so that you can use simple PHP include object   If you convert the file names of your  html pages to  php - then at the top of each of your  php pages you can use one line of code to include the content from your header php    lt  php include  header php      gt    Do the same in the footer of each page to include the content from your footer php file   lt  php include  footer php      gt    No JavaScript   Jquery or additional included files required   NB You could also convert your  html files to  php files using the following in your  htaccess file    re-write html to php RewriteRule        html   1 php  L  RewriteRule         http     HTTP HOST   1  R 301 L      re-write no extension to  php RewriteCond   REQUEST FILENAME   -f RewriteRule             1 php  NC L

User · Answer

I ve been working in C  Razor and since I don t have IIS setup on my home laptop I looked for a javascript solution to load in views while creating static markup for our project   I stumbled upon a website explaining methods of  ditching jquery   it demonstrates a method on the site does exactly what you re after in plain Jane javascript  reference link at the bottom of post   Be sure to investigate any security vulnerabilities and compatibility issues if you intend to use this in production  I am not  so I never looked into it myself    JS Function  var getURL   function  url  success  error        if   window XMLHttpRequest  return      var request   new XMLHttpRequest        request onreadystatechange   function              if  request readyState     4                if  request status     200                    if  error  amp  amp  typeof error      function                         error request responseText  request                                     return                            if  success  amp  amp  typeof success      function                     success request responseText  request                                      request open  GET   url       request send         Get the content  getURL        views header html       function  data            var el   document createElement el           el innerHTML   data          var fetch   el querySelector   new-header            var embed   document querySelector   header            if   fetch     embed  return          embed innerHTML   fetch innerHTML              index html   lt  -- This element will be replaced with  new-header -- gt   lt div id  header  gt  lt  div gt    views header html   lt  -- This element will replace  header -- gt   lt header id  new-header  gt  lt  header gt    The source is not my own  I m merely referencing it as it s a good vanilla javascript solution to the OP  Original code lives here  http   gomakethings com ditching-jquery get-html-from-another-page

User · Answer

I tried this  Create a file header html like   lt  -- Meta -- gt   lt meta http-equiv  Content-Type  content  text html  charset ISO-8859-1  gt   lt  -- JS -- gt   lt script type  text javascript  src  js lib jquery-1 11 1 min js   gt  lt  script gt   lt script type  text javascript  src  js lib angular min js  gt  lt  script gt   lt script type  text javascript  src  js lib angular-resource min js  gt  lt  script gt   lt script type  text javascript  src  js lib angular-route min js  gt  lt  script gt   lt link rel  stylesheet  href  css bootstrap min css  gt    lt title gt Your application lt  title gt    Now include header html in your HTML pages like     lt head gt      lt script type  text javascript  src  js lib jquery-1 11 1 min js   gt  lt  script gt      lt script gt          function       head   load  header html           lt  script gt   lt  head gt    Works perfectly fine

[javascript] Make header and footer files to be included in multiple html pages

Examples related to javascript

Examples related to jquery

Examples related to html

Examples related to css