3

My question is similar to this one How to include an HTML page into another HTML page without frame/iframe?

But the answers are not working for me. Objects and iframes create a box with scrollbars, which I don't want, and if I have links to other pages, I would like the whole page to change, not just what's inside the box.

This instruction doesn't work

<!--#include virtual="/footer.html" -->

I want to use only html, because this is how the website has been built and we are not redesigning it. I am only doing this for content modification purposes.

Is it a bad practice to write an html header (or footer) in a javascript file then include the .js in all of my html files?

1st edit

I have about 70 different html static pages. I want to update contents such as the logo, the menu, the meta description of the web site, the text color, etc. but at the moment, I have to make each of these modifications 70 different times.

I used javascript for the html part of the menu, because the menu worked with javascript anyway, and included the file in all of my html files.

function writeJS(){
    var strVar="";
    strVar += "<body bgcolor=\"#000000\">";
    strVar += "<div class=\"Main_container\">";
    ...
    document.write(strVar);
}
writeJS();

I don't know if it is a good or bad idea to do the same with those tags for example.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org
/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" ...

2nd edit

Although the html/javascript option was viable, we decided to invest a couple of days to go for a wordpress.org site (cheaper and better in the long run).

Community
  • 1
  • 1
Catherine
  • 129
  • 2
  • 2
  • 12

4 Answers4

1

I'm fairly sure that include solution only works server side. Did you try the jQuery solution that was provided on that page? It seems to fit your javascript requirement:

If you mean client side then you will have to use JavaScript or frames. Simple way to start, try jQuery

$("#links").load("/Main_Page #jq-p-Getting-Started li");

Source comment.

Community
  • 1
  • 1
achillesminor
  • 171
  • 1
  • 11
  • At least attribute all of your answer to the original author: http://stackoverflow.com/a/676409/3791372 – user3791372 Jan 24 '16 at 19:48
  • My comment explicitly states that code was from the page he linked, I wasn't taking credit for the solution. However, I will update to include direct link. – achillesminor Feb 05 '16 at 11:21
1

This instruction doesn't work at all

<!--#include virtual="/footer.html" -->

...probably becaue SSI is not enabled. Presumably you're telling us this because you think it would give you the result you want - implying that part of the question is why didn't it work? What did you do to investigate?

Is it a bad practice to write an html header (or footer) in a javascript file then include the .js in all of my html files?

It's not about bad practice - it won't work - you can inject html from javascript - but you need javascript code to do the injecting. Also this contradicts your earlier statement:

I want to use only html

The code you've provided does not inject html it appends it. The problem with document.write is that it only writes to the end of the document input stream. And if that stream is already closed, it re-opens it and clears the current HTML. There's never a good reason to use document.write(). Consider:

<html>
   <div id="header">
     <noscript>....</noscript>
   </div>
   <div id="page_specific_content">
   ...
   </div>
   <div id="footer">
     <noscript>....</noscript>
   </div>
 </html>

and...

 function addHeader()
 {
   var el=document.getElementById("header");
   if (el) {
      el.innerHTML="...";
   }
 }

But this is still a bad way to write a dynamic website. Even if you don't want to run ASP or PHP or PERL or serverside JS or.... on your production server, it'd make a lot more sense to to dfevelop using a proper CMS or templating system then scrape the HTML to get a static version for publication.

symcbean
  • 47,736
  • 6
  • 59
  • 94
  • Sorry, I didn't realize the contradiction. I meant that I didn't want to use a new language from what is already used (html and javascript). I saw javascript as a language to create add-ons to websites, but I may be wrong, maybe there are websites using javascript the way others would use PHP. I agree that this is a poorly built website, but it was made by an external firm that doesn’t exist anymore. This site is not important enough to invest a lot of time to properly rebuild it as much as I would like to. – Catherine Jun 18 '13 at 16:08
  • All I have is a couple of days to at least make it look good (content and css) and I'm trying to ease my work. I did no investigation about SSI and I'm not gonna enable it, I instead implied this is not a solution for me after trying it and understanding that this was not supposed to work. I wanted to make it short for readers, but I’m explaining it now anyway… I will try your solution. Thank you – Catherine Jun 18 '13 at 16:09
1

Yes, it is bad practice. Use the right tool for the right job.

For most of the things you mention, you need to use an external stylesheet (bgcolor in 2013?). This will already prevent you from having to change 70 files.

If there's also content you wish to share between pages, the proper way would be to use server-side scripting (such as php) to include it.

Including it client side is messy and will only work partly. You can only load things that go into the DOM (so not your meta information or your Head element's content). Plus your site will be completely disabled when a user does not have javascript enabled (not that common these days, but still).

Joeri Hendrickx
  • 16,947
  • 4
  • 41
  • 53
  • Indeed, but as I told symcbean, the site was built by an external firm that doesn’t exist anymore and rebuilding it properly is not an option. External css were used but for some elements, styling was written in every single page. I also asked myself about users disabling javascript. Which is better, this or not using javascript? – Catherine Jun 18 '13 at 16:19
  • The question is not only the cost, but also the maintainability in the future. If this is a one off, you could go for such a hack (but it's still a hack, not good practice, and that was the real question I suppose). If you want to maintain the page in the future, better to just bite through it and add the styling properly through the css. If your site supports php, you can use it just for the includes (1 line) and ignore it for anything else. You won't even notice it's there. – Joeri Hendrickx Jun 19 '13 at 09:01
  • We decided to go for a wordpress.org site :) – Catherine Jun 21 '13 at 16:20
1

I guess there could be numerous ways to do this:

  1. Use SSI as described in the solution at How to include an HTML page into another HTML page without frame/iframe?
  2. If you have php or similar scripting languages and feel confortable, you could use it.
  3. Use simple js injection using JQuery or native JS code. See: https://stackoverflow.com/a/676409/2027264
  4. Use IFrames with some CSS to get rid of scrollbars
  5. Use Javascript templates(Underscore, backbone and many others). Also see: What Javascript Template Engines you recommend? and http://en.wikipedia.org/wiki/Javascript_templating

Hope this helps.

Community
  • 1
  • 1
MickJ
  • 2,127
  • 3
  • 20
  • 34
  • For (1 and 2): SSI doesn't enable caching in browser. The whole thing has to travel to client, even if a tiny part is changed. For (3) is not that bad, as long as content cached. For (5) it's a horrible overthinking of the well-thought *server-based Web*. Adding that forces us to create a store and FETCH data with all consequences. (4) works just fine, but I heard it's not performant. Most ads are loaded that way though. – Brian Cannard Feb 11 '22 at 03:14
  • https://css-tricks.com/the-simplest-ways-to-handle-html-includes/ -- an entire article dedicated to this limitation. – Brian Cannard Feb 11 '22 at 03:35