0

I'm trying to find a code in Javascript to make one header for multiple pages in HTML put i culdn't find can you please advise ?

Maryam
  • 11
  • 2
    Possible duplicate of [Make header and footer files to be included in multiple html pages](http://stackoverflow.com/questions/18712338/make-header-and-footer-files-to-be-included-in-multiple-html-pages) – ern Jan 31 '16 at 18:12

3 Answers3

1

Javascript is a client-side language, executed in a single-page-environment by the client (normally a browser).

If you want your site to take advantage of templating across multiple pages

eg. including the same header on multiple pages

then you are better off using a server-side language executed by the server.

Server-side languages include:

  • PHP
  • ASP
  • Ruby on Rails
  • Node.js

and others.

Rounin
  • 21,349
  • 4
  • 53
  • 69
  • I found this code but it dosen't work with me – Maryam Jan 31 '16 at 18:25
  • The code you have posted is `jquery`, which is a `javascript` library. Again, I recommend that you take advantage of a server-side language such as `PHP` if you want to make one header for multiple pages. If you already know `html`, `PHP includes` are very straightforward - arguably much less complex than learning `javascript` and `jquery` syntax and structures. – Rounin Jan 31 '16 at 19:14
  • @Rounin - This problem can be easily solved with an iframe or AJAX. Adding a server-side solution for this is not necessary and would introduce architectural complexities and performance issues. – Scott Marcus Jan 31 '16 at 19:51
  • 2
    @Rounin I agree on a server side solution for this, as it will decrease httprequests. If it can't be done, client side options comes next, and the dupe link in the main comments shows a simple and elegant way. – Ason Jan 31 '16 at 20:29
  • @LGSon - I really would advise against the server-side solution. It may decrease HTTP requests, but it will increase overall load time as you will be introducing a second processing engine into the mix. This is exactly the kind of thing that AJAX is meant to deal with and implementing AJAX for this purpose is very simple. – Scott Marcus Jan 31 '16 at 20:46
  • @ScottMarcus I have used server side tech. for 20 years and all my clients say _Wow, how fast it is_, so I can't agree with you on that. – Ason Jan 31 '16 at 20:52
  • @Rounin - Using AJAX as opposed to incorporating a server-side solution is simpler for the basic fact that all work is initiated by the client. There is no reliance on a server beyond serving up the request. No need to impose any requirements on server. Overall page load time will be faster (as you aren't using two processing engines that work in a synchronous queue, but rather you are fetching the header asynchronously as soon as the main page signals (via a callback) that it is ready for that content. AJAX for this purpose can be as simple as shown here: https://jsfiddle.net/j942kdz0/2/ – Scott Marcus Jan 31 '16 at 20:56
  • @LGSon - I didn't say that server-side solutions were slow. I said that not relying on a second architectural component is faster. Wouldn't you like your clients to say "Wow, that's even faster!"? By the way, I too have 20+ years of server-side experience (classic ASP, ASP.NET), so I'm not just preaching AJAX for the sake of it. Welcome to the modern web! – Scott Marcus Jan 31 '16 at 20:59
  • Thanks for this @ScottMarcus - I'm looking for benchmark tests online and haven't found any yet. Do you know of any? – Rounin Jan 31 '16 at 21:04
  • @ScottMarcus You make it sound when saying, _Welcome to the modern web!_, that server side tech. is outdated? – Ason Jan 31 '16 at 21:04
  • For fetching static server-side resources like in this case? Yes. – Scott Marcus Jan 31 '16 at 21:06
  • @ScottMarcus 2 notes ... people who, out of security reasons, have their javascript temporary turned off, will get a very strange page ... where does the OP say he has static header files?, you maybe should have asked before answering – Ason Jan 31 '16 at 21:14
  • @Rounin Sorry about that ... do what I did, make your own tests and decide from there, as it all depends. – Ason Jan 31 '16 at 21:15
  • Here is one opinion from 2012: Client-Side vs. Server-Side Rendering (http://openmymind.net/2012/5/30/Client-Side-vs-Server-Side-Rendering/) by Karl Seguin – Rounin Jan 31 '16 at 21:16
  • @Rounin Exactly, _an opinion_, this one more in favor of server side, backed up with his experience ... but as I said, it depends ... learn from what you read, be open minded, make your own tests and you'll be fine. – Ason Jan 31 '16 at 21:20
  • I think I need to clarify... Rounin's answer to this question is fundamentally incorrect, in that it presents JavaScript as a client-side language and that the best solution is a server-side language. Both these statements are false. Perhaps I did assume that the header was static, but I have to say that regardless, adding a server-side component for this just doesn't make any sense. I'm really just getting the feeling that because LG and Rounin don't have experience with AJAX that they are dismissing it. This is one textbook example of what AJAX can do quite simply. – Scott Marcus Jan 31 '16 at 21:22
  • @LGSon if JavaScript being turned off is a concern, don't forget that I also suggested that this could easily be done with an iframe, which would require no scripting and no server-side resources (other than serving the file). – Scott Marcus Jan 31 '16 at 21:43
  • @ScottMarcus I never dismissed AJAX, I favored server side tech. when it, in this case, comes to merging several files server side versus several client side httprequests. ... and I write my own script libraries so I am very aware of what it can do and how to use it. – Ason Jan 31 '16 at 21:57
  • @ScottMarcus "I'm really just getting the feeling that because LG and Rounin don't have experience with AJAX that they are dismissing it." That's rather unfair. I don't have experience with `ajax` - that much is true. However, not only did I not dismiss it, I thanked you and I asked you for more info on why it was better. I then asked you if you knew of any benchmark test results. Does that look more like dismissal to you or active interest and a willingness to learn? – Rounin Jan 31 '16 at 22:23
0

You could use a html preprocessor (for example Jade). There's something called mixins. Mixins allow you to create reusable blocks of code.

janispritzkau
  • 1,617
  • 2
  • 11
  • 15
0

Create the common header and place in its own file. Then in all other pages, create an empty element with an id of something like "header". Then have each page make an AJAX call upon page load to fetch that file and place the result of the AJAX call in the empty div.

You could also do this with an iframe and just set its source to the header file.

Scott Marcus
  • 57,085
  • 6
  • 34
  • 54