Solved

include a html page in my html page

Posted on 2004-08-17
24
3,191 Views
Last Modified: 2013-11-18
I want to include a html page in my html page. How can i?

All my html pages has a common header so I want to know how to include a html file as header in all my html documents. When I want to update header, i just need to update one file only.

1. I tried <!--#include file="header.html"--> but it does not show in the browser but shows in the dreamweaver.

2. I have used a lot set of tables and images and scripts in the header.html and how can i convert this to .js so that i can use <script language="JavaScript" type="text/javascript" src="header.js"></script>

Explain me the best solution.

Thanks

Zafar
0
Comment
Question by:mohamedzafarullah
24 Comments
 
LVL 21

Expert Comment

by:pinaldave
ID: 11827946
Hi mohamedzafarullah,

you can not include page into the page.
There is one way you can do something like that... is Iframe
http://www.yourhtmlsource.com/frames/inlineframes.html


Regards,
---Pinal
0
 
LVL 21

Accepted Solution

by:
pinaldave earned 100 total points
ID: 11827952
Hi mohamedzafarullah,

you can use aother server side language to do this if you wish.

Regards,
---Pinal
0
 
LVL 1

Assisted Solution

by:C7Swill
C7Swill earned 100 total points
ID: 11827973
Check out http://bignosebird.com/ssi.shtml

You need a server that can do includes.
0
 
LVL 2

Expert Comment

by:phpisthefuture
ID: 11827985
Yes you will need a server side language. Just an example, if you were to use PHP:
design your navigation/menu in a seperate page and name it menu.inc
then use <?php include "menu.inc"?> where you want to show the menu on the page. So if you change anything in the menu page, it will change on all of your pages. It's the idea :)
Good luck.
0
 
LVL 21

Expert Comment

by:pinaldave
ID: 11827988
Hi mohamedzafarullah,

I am not sure which lanaguage you are using for server side... that is why I have tried to give the answer which is not related to any lang.
for ColdFusion <cfinclude template="yourfile.cfm">

Regards,
---Pinal
0
 
LVL 1

Expert Comment

by:C7Swill
ID: 11827999
You could also keep it as a javascript file and use:

document.write('<font color="blue">My Header Content.</font>');

to echo your tables.
0
 
LVL 10

Expert Comment

by:daleoran
ID: 11828402
For the include to work so servers require the web page to have the extension .shtml instead of .htm or .html
Try that

Michael

0
 
LVL 10

Expert Comment

by:daleoran
ID: 11828408
for example
index.shtml
which will have
<!--#include file="header.html"-->
in the code

Michael

0
 
LVL 33

Assisted Solution

by:knightEknight
knightEknight earned 100 total points
ID: 11830129
I agree that a server-side include solution is much better ... but if a client solution is your only choice, then you can try this:


<HTML>

<HEAD>
<SCRIPT language='JavaScript'>

 function include(url)  // must be a fully qualified URL, I don't know why
 {
   if ( document.all )
   {
     var xml = new ActiveXObject("Microsoft.XMLHTTP");
     xml.Open( "GET", url, false );
     xml.Send()
     document.writeln(xml.responseText);
   }
   else  // Netscape code from http://www.experts-exchange.com/javascript/Q.20290896.html
   {
     if ((location.host=='' && url.indexOf(location.protocol)==-1) || url.indexOf(location.host)==-1)
     {
       netscape.security.PrivilegeManager.enablePrivilege("UniversalConnect");
     }

     var dest = new java.net.URL(url);
     var dis  = new java.io.DataInputStream(dest.openStream());
     var res  = "";
     while ((line = dis.readLine()) != null)
     {
       res += line + java.lang.System.getProperty("line.separator");
     }
     dis.close();
     document.writeln(res);
     return res;
   }
 }

</script>
</head>

<BODY>
<BR><B>See the included file below:</B><BR>

&nbsp;<p>
<div id="test">
<SCRIPT language='JavaScript'>
   // must be a fully qualified URL -- can be any type of file (html,jsp,asp,etc)
   include("http://yourserver.com/header.html");
</SCRIPT>
</div>


</body>
</html>
0
 
LVL 19

Expert Comment

by:dakyd
ID: 11830731
Another suggestion for a client-only solution is below.  It uses a hidden iframe, but actually renders the content inside a div.  It should avoid having to deal with ActiveX and the streams if that's not to your liking.  Hope that helps.

<HTML>
<HEAD>
     <script type="text/javascript">
     function copyText()
     {
          var d=window.frames["innerFrame"].document.getElementsByTagName("body")[0].innerHTML;
          document.getElementById("theHeader").innerHTML = d;
     }
     </script>
</HEAD>

<BODY>
<div id="theHeader"></div>
<IFRAME name="innerFrame" src="THE URL OF YOUR HEADER GOES HERE" onload="copyText()" style="display: none"></IFRAME>
</BODY>
</HTML>
0
 
LVL 3

Expert Comment

by:EverLearningCodeMonkey
ID: 11832278
Hi Zafar,

The piece of code you've presented looks like ASP, as has been suggested by several people a server side include solution would best suit your needs.

Having the include line of code in the document isn't enough, the page will have to be served up through a webserver and the "parent" document will have to have an extension of .asp or .php or whatever server side scripting language you are currently using - the "included" document can be left as is.

If you're using Dreamweaver and the line of code you gave was ASP can I also assume that you're working on a windows machine?  If so then setting up either "Personal Web Server" for Win 9x or IIS on Win2K/XP would help solve your problem, these windows componets turn your local machine into a webserver as well and you will be able to view your pages as they would be displayed from a webserver.

There may be a little more overhead involved with this process but when in place its a very elegant solution to the problem that you are facing.  I've got a similar setup on my own box and I find it extremely useful.

Hope this helps,

Scott
0
Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

 
LVL 14

Expert Comment

by:Esopo
ID: 11835744

>>1. I tried <!--#include file="header.html"--> but it does not show in the browser but shows in the dreamweaver.<<

It won't show in your browser if you haven't set up a server to work with. This is because the SSI (Server Side Includes), which is the name for the code you are using, needs an able server to work.
By able server I mean just about any of the "big" servers like IIS (Internet Information Service) for Windows and Apache for Win or Linux.


>>2. I have used a lot set of tables and images and scripts in the header.html and how can i convert this to .js so that i can use <script language="JavaScript" type="text/javascript" src="header.js"></script><<

This is a reasonable include method when you don't want to depend on your server. The tricky* thing is "header.js" must be coded in the form of javascript language, so you would have to set the code in javascript form, as C7Swill stated above:
******************************
document.write('<font color="blue">My Header Content.</font>');
******************************

You must wrap every line of HTML that you want to insert wth document.write( -html content - );


You can also use the IFRAME solution proposed more than once above, but that won't yield the result you want for your site. An Iframe is a frame that floats inside your page.

Do you have server side scripting available? ASP, PHP, Perl, ColdFusion, etc?
Every server side scripting language has a way to include pages. If you do have one tell us and will hand you a one-line code to fix your problem, but first you'll need to either setup a server in your local machine or test the pages directly in the final host.

In conclution, if you plan to wok and improve your current site for a while, I suggest you go server side. I you just want to get this out of the way for now and never look back, go with the javascript or Iframe.

Hope this helps,

Esopo.
0
 
LVL 1

Expert Comment

by:Delacourt
ID: 11858814
page to be included can be html

page that it must be included in should have an <iframe> if you dont have php
or have index.php and inside: right:

included(header.html);

Just my two cents worth
0
 
LVL 1

Expert Comment

by:Delacourt
ID: 11858821
cant use include in an html page !
0
 
LVL 10

Assisted Solution

by:Havin_it
Havin_it earned 100 total points
ID: 11863652
Back to the js include for a moment, you can in principle use just one document.write statement, but that means the HTML inside it has to be one (very long) unbroken line, no line-breaks are permitted. Consider:

document.write('<table width="100%" cellpadding="0" cellspacing="0">\n<tr>\n<td width="50%">Blah blah blah</td>\n<td width="50%">More blah blah blah</td>\n</tr>\n</table>');

*Actually you could probably do without the \n line-breaks, since I've yet to see a browser that'll echo this output to the source-view.

While this seems graceless and a pain to make updates, it can be quite painless if:

you keep a normally-styled version of the header HTML (without the js bits) for easy editing, then go through it with a find/replace function or program to remove the linebreaks. Provided your HTML uses only double-quotes and your javascript uses single quotes, that's all you need to do to get a usable string to update your .js file.

Having said all that, I'd probably just use an Iframe too...
0
 
LVL 10

Expert Comment

by:Havin_it
ID: 11863661
Hmm, my example didn't quite come out as planned. That can only mean those scamps in Engineering have finally fixed the board to wrap long lines. Dang.

Anyway, I'm sure you get the idea.
0
 

Expert Comment

by:ninteen83
ID: 11868766
try this

<iframe src="menubar.html" width=755 height=165 frameborder=0 scrolling=no></iframe>
0
 
LVL 10

Expert Comment

by:Havin_it
ID: 11876626
Actually it's even simpler to keep a .js file in a format that's editable and usable at the same time - this occurred to me after looking at a Linux batchfile that had a long line split across lines. Just escape the line-breaks, like:

document.write('\
\
<table>\
  <tr>\
     <td width="50%">Hello</td>\
     <td>World</td>\
  </tr>\
</table>\
\
');

Again, if you wanted to have the page edited in something like Dreamweaver, you could do so and then run a similar find-replace function to get it lookng like this.
0
 

Assisted Solution

by:sgreeny12
sgreeny12 earned 100 total points
ID: 11983116
I would use php. You would have to convert the files to php though. Or you could use an iframe.

To do it using php I would write <?php include ("header.html"); ?>

If you have anyquestions please ask.

Now you only have to edit the html file and it will change everywhere you include in php. For instance take a look at my first page code.

I brake it up so that the top is a header the same on everypage. SO is the left navigation bar and the horizontal navigation bar. I also sell the same ads on the right everypage so I just copy the template and I chage the file main.htm to the maincontect I want to use on that page. Does this help?

<table border="0" cellspacing="1" cellpadding="0" width="760" bgcolor="#000000">
  <tr>
     <td><?php include("header.htm"); ?></td>
  </tr>
  <tr>
     <td width="760"><?php include("hornav.htm"); ?></td>
  </tr>
  <tr>
     <td><table border="0" cellspacing="0" cellpadding="0" width="760" bgcolor="#ffffff">
  <tr>
     <td width="160" valign="top"><?php include("leftnav.php"); ?></td>
     <td width="400"><?php include("main.htm"); ?></td>
     <td width="200" valign="top" align="center"><?php include("right_ads.htm"); ?></td>
  </tr>
</table</td>
  </tr>
<tr>
<td bgcolor="#ffffff" align="center" colspan="3"><?php include("footer.htm"); ?></td>
</tr>
</table>
0
 

Expert Comment

by:sgreeny12
ID: 11983119
Also the good thing is you can even do this using the few php codes that dreamweaver has preset. Enjoy!!!
0
 
LVL 3

Expert Comment

by:anandhariharan
ID: 12235818
Hi

Try this simple one.

<html>
<script>
     function loadFile()
            {
                    window.open('header.html','testFrameId');//testFrameId is the ID of the iFrame
            }
</script>
<body onload="loadFile()">
<table>
    <tr>
        <td><iframe id="testFrameId" style="width:100%; height:100px;"></td>
    </tr>
</table>
</body>
</html>

------------------------End of Code-------------------------------

All the Best

Anand
0
 
LVL 1

Expert Comment

by:homewabbit
ID: 12398392
Here is code to have an html page inside an html page.

<iframe width="400" height="300" src="http://www.myresults.com/"></iframe>

HomeWabbit/*
0

Featured Post

What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
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…

760 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

20 Experts available now in Live!

Get 1:1 Help Now