Solved

How to share code across different HTML files

Posted on 2004-09-11
15
364 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

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

Secure Your Active Directory - April 20, 2017

Active Directory plays a critical role in your company’s IT infrastructure and keeping it secure in today’s hacker-infested world is a must.
Microsoft published 300+ pages of guidance, but who has the time, money, and resources to implement? Register now to find an easier way.

Question has a verified solution.

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

Suggested Solutions

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

726 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