Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Include html in html through javascript

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).

like image 318
Catherine Avatar asked Feb 05 '26 18:02

Catherine


1 Answers

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.

like image 191
symcbean Avatar answered Feb 07 '26 09:02

symcbean