Solved

How to share code across different HTML files

Posted on 2004-09-11
15
342 Views
Last Modified: 2006-11-17
I want to find a way to share HTML code that can be used in different HTML file.

For example, for things such as menus, company name, my phone number, my e-mail address that could be on any page, instead of typing them in each time, I just want to “import” them, from some type of library file.

That way, if I change something like me e-mail address, I only need to change my HTML in one place, and all my pages will be automatically updated next time they are loaded in the browser.


Any help would be appreciated.
Regards.
0
Comment
Question by:MPountley
15 Comments
 
LVL 36

Expert Comment

by:Zyloch
ID: 12034465
Hi

The only two ways to do that with HTML/Javascript is either with an iframe, and you can put styles in it to make it without a border etc., or to use xmlhttp which isn't worth it.

I recommend you use a server-side language, for instance, PHP. PHP has an include() statement you can just plop into your code and it'll do that.

Regards,
Zyloch
0
 
LVL 8

Expert Comment

by:klykken
ID: 12034533
Zyloch is to the point advicing you to use server side includes.
If you are using PHP like he suggested, you can for example have a file called copyright.inc with your copyright statement like this:

<div class="copy">Copyright&copy;2004, MPountley. All Rights Reserved</div>

If you're going to include this on your page, you would need to change the filename of the html file to one that is going to be parsed as php from your server.
So if you had file.html
Change it to file.php

Inside file.php include this line of code that will include the code from your copyright.inc
<? include("copyright.inc"); ?>

And frames is an out-of-date web technology and should only be used in closed environments like an intranet, imho.
0
 
LVL 1

Expert Comment

by:JsonTerre1
ID: 12034624
I have done this for the US Airforce.  They did not want server side for anything on a certain project for some reason so it had to be entirly html.  What you should use is JavaScript.

Place all your code that you want to share in javascript files.  Then include that file in your pages like so...


<html>
<head>
<title>ACES - Training CD</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table><tr><td>
<SCRIPT LANGUAGE="JavaScript" SRC="js/nav.js"></SCRIPT>
    </td>
  </tr>
<tr><td>My content</td></tr>
</table>
</body>
</html>

in the nav.js file put somthing like this:


var rightNav = ""

rightNav =+ "<br>";
rightNav =+ "<A name=\"link_L2\" class=\"navbutton\" HREF=\"default.htm\">Link 1</A>";
rightNav =+ "<br>";
rightNav =+ "<A name=\"link_L2\" class=\"navbutton\" HREF=\"default.htm\">Link 1</A>";


Just another way to do it.  But a good way without server side coding.

-Jason

0
 
LVL 36

Expert Comment

by:Zyloch
ID: 12034628
Ah yes, never thought of that. Wouldn't you also want document.write(rightNav); though?
0
 
LVL 1

Expert Comment

by:JsonTerre1
ID: 12034633
Yes.  sorry i forgot that part.

LOL

-Jason
0
 
LVL 1

Expert Comment

by:JsonTerre1
ID: 12034670
this will work as well if you want to put all the sections you are including in one JS file and give them seperate variables.

Place this with the variable name you are writing for each one in the places that  you need it.

<SCRIPT LANGUAGE="JavaScript">                                    
      document.write(rightNav);
</script>


both ways work. just depends if you want to seperate each javascript into seperate files each seaction you are includeing or put them all in one JS file and give them seperate variables.

-Jason

0
 
LVL 36

Expert Comment

by:Zyloch
ID: 12034707
Ah, well, because everyone's sharing, I might as well too:
This is the xmlhttp method: (Not on Mozilla at least, won't work)

var xmlHTTP = (document.all) ? new ActiveXObject("Microsoft.XMLHTTP") : new XMLHttpRequest();
xmlHTTP.open("GET", "http://www.google.com", false);
if (document.all) {
   xmlHTTP.send();
} else {
   xmlHTTP.send(null);
}

var resText = xmlHTTP.responseText;

0
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
LVL 36

Expert Comment

by:Zyloch
ID: 12034708
Just change google with something else
0
 
LVL 4

Expert Comment

by:Neil_Simpson
ID: 12034824
Well here's my suggestion, different again. You should use server-side includes (SSI). All you need to do is create a file navigation.txt and add the HTML code directly to that. In each HTML page you add:
<!--#include virtual='/navigation.txt' --> and the server will add the contents of the file to this location.

This method requires the HTML file to be parsed before the server returns it, this is a configurable server setting. It is common that you will have to rename files to *.shtml in order to get the server to parse them.

I would advocate this method over javascript and PHP purely because it is neater and it doesn't make your code quite so ugly. :o)
0
 
LVL 36

Expert Comment

by:Zyloch
ID: 12034946
Actually, PHP doesn't make the code uglier, it's basically the same thing. You can replace any single

<!--#include virtual='/navigation.txt'--> with
<?php include('/navigation.txt'); ?>

But the concept still remains.

(Note for the SSI method, your server must be set up to allow SSI)
0
 
LVL 1

Expert Comment

by:JsonTerre1
ID: 12035171
Zyloch
,

uglier?  Come on..  I don't want to make this thread become a code bashing war but i think that ASP is better then PHP. I know them both and have to say that uglier is a strong word when you are talking about a simple thing as an include statement. If you were talking about a complete function or somthing there would be an agument there but somthing as simple as this.  I think not.

Let jsut give suggestions and nothing more.

-Jason
0
 
LVL 36

Expert Comment

by:Zyloch
ID: 12036766
Yes, I know, I was just stating my opinion. For all I know, ASP might be much better, but in syntax, I would think that the two include statements don't hold much difference, I was only replying to

>>I would advocate this method over javascript and PHP purely because it is neater and it doesn't make your code quite so ugly. :o)

just to clear some facts up. Of course, if you think the PHP for the include statement is still tons uglier than the include, be my guest, but I didn't want MPountley to be turned away from PHP because of Neil's opinions (no offense, Neil, your opinion is your opinion :-) PHP may just be uglier, but it's just a matter of opinion.

P.S. I would do the same for ASP, heh
0
 

Author Comment

by:MPountley
ID: 12036797
The JavaScript sounds sounds very close to what I want, but I can't get the example to work. <grin>
Here is my HTML and my JS file. I have placed them in the same directory and have tried with IE and Mozilla.
I just get "My content"
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html;

charset=iso-8859-1">
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table><tr><td>
<script LANGUAGE="JavaScript" src="nav.js">                          

   
     document.write(rightNav);
</script>

    </td>
  </tr>
<tr><td>My content</td></tr>
</table>
</body>
</html>

(*** NAV.JS ***)
var rightNav = ""

rightNav =+ "<br>WOW";


Any suggestions would be great.

Regards,
Mark
0
 
LVL 1

Accepted Solution

by:
JsonTerre1 earned 125 total points
ID: 12036812
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html;

charset=iso-8859-1">
</head>
<SCRIPT LANGUAGE="JavaScript" SRC="nav.js"></SCRIPT>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table><tr><td>
<script LANGUAGE="JavaScript">                          
     document.write(rightNav);
</script>



    </td>
  </tr>
<tr><td>My content</td></tr>
</table>
</body>
</html>




// JavaScript Document

var rightNav = ""

rightNav = rightNav + "<br>";
rightNav = rightNav + "<A name=\"link_L2\" class=\"navbutton\" HREF=\"default.htm\">Link 1</A>";
rightNav = rightNav + "<br>";
rightNav = rightNav + "<A name=\"link_L2\" class=\"navbutton\" HREF=\"default.htm\">Link 1</A>";


there you are.  Sorry about that.

-Jason


0
 
LVL 1

Expert Comment

by:JsonTerre1
ID: 12036820
Oops again....


the nav.js file:



// JavaScript Document

var rightNav = ""

rightNav = rightNav + "<br>";
rightNav = rightNav + "<A name=\"link_L1\" class=\"navbutton\" HREF=\"Page1.htm\">Link 1</A>";
rightNav = rightNav + "<br>";
rightNav = rightNav + "<A name=\"link_L2\" class=\"navbutton\" HREF=\"Page2.htm\">Link 2</A>";

-Jason
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Foreword (July, 2015) Since I first wrote this article, years ago, a great many more people have begun using the internet.  They are coming online from every part of the globe, learning, reading, shopping and spending money at an ever-increasing ra…
Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …

911 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now