Solved

HTML Client-Side Include - can i do it?

Posted on 2004-03-25
27
7,702 Views
Last Modified: 2013-11-18
I have a website that will only be run on my school intranet, (ie. it doesnt run on any fancy SSI server) and i want to include one html file inside another. I would like to have a single index.htm page that responds via javascript or something to links and includes in a cell of a table different files depending which option is clicked.

what is the command that i would use to include the file? like if you are using SSI you can use <!--#include file='otherfile.htm'--> but how is this done for client-side includes? Preferably i would like to use a javascript command, simply because i know a little bit of js, but any better ideas would be appreciated (except for running a SSI server)

Just so you know, this ISNT homework ;) I'm doing work for the school, but not for class.)
0
Comment
Question by:SamShaw
  • 6
  • 5
  • 4
  • +8
27 Comments
 
LVL 9

Accepted Solution

by:
lombardp earned 180 total points
ID: 10675569
As far as I know, client-side include in HTML is not possible, but you could obtain the same result if you use FRAMEs or IFRAMEs.
0
 
LVL 32

Expert Comment

by:shalomc
ID: 10675592
SamShaw,
There is a method that is good for Explorer but does not work for Netscape.

You can use the XMLHTTP method to get an arbitrary file from a web site into the client, and then use Javascript or Java applet to populate the table.

http://msdn.microsoft.com/library/default.asp?url=/library/en-us/xmlsdk30/htm/xmobjxmlhttprequest.asp

All the documentation says that the data sent using XMLHTTP should be only XML, but that is not true.
You can use it to GET, POST, and basically do anything you want.

XMLHTTP can be used both by client Javascript AND by ASP server.

A sample usage:

function GetFromSchool(txtFile) {
       var SchoolURL = "http://www.School.com/xx/yyyyy/" + escape(txtFile) ;
    var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    xmlhttp.Open('GET', SchoolURL , false);
    xmlhttp.Send();
    return xmlhttp.responseText;
}

0
 
LVL 1

Author Comment

by:SamShaw
ID: 10675656
lombardp: I dont want to use FRAMES, it needs to be in one window.

shalomc: could you please explain a bit more about XMLHTTP? it sounds promising, if only it was more browser-independant, but i'll try it anyway :)

thanks,
SamShaw
0
 
LVL 4

Assisted Solution

by:g_damodar
g_damodar earned 50 total points
ID: 10675752
0
 
LVL 32

Expert Comment

by:shalomc
ID: 10675774
Try this to get a feeling of the possibilities.

<script language-"javascript">
function GetFromSchool(URL) {
    var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    xmlhttp.Open('GET', URL , false);
    xmlhttp.Send();
    window.divDisplay.innerHTML=xmlhttp.responseText;
    return xmlhttp.responseText;
}

</script>

<form name="include">
<input name="getButton" type="button" onClick="javascript:GetFromSchool('anotherfile.html')" value="    Include File         ">
</form>
<table>
<tr><td>
<div id="divDisplay"></div>
</td>
</tr>
</table>


ShalomC
0
 
LVL 1

Expert Comment

by:Brandwood
ID: 10675805
javascript includes are done like

<script language=javascript src="yourFile.htm" type=text/javascript></script>
0
 
LVL 1

Expert Comment

by:Brandwood
ID: 10675855
you could of course do it this way, just copy and paste the code below and create 3 other htm pages in the same directory called test1.htm, test2.htm, and test3.htm

this will do what you want it to do.

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language=javascript type=text/javascript>
function doSource(locate){
document.all.iView.src=(locate);
}

</script>
</head>

<body>
<a href="javascript:doSource('test1.htm')">location 1</a><br>
<a href="javascript:doSource('test2.htm')">location 2</a><br>
<a href="javascript:doSource('test3.htm')">location 3</a><br>

<iframe id='iView' style='width:640px; height:400px;' src='results.asp?link="&link&"''></iframe>

</body>
</html>
0
 
LVL 1

Expert Comment

by:Brandwood
ID: 10675864
change the src in the iframe tag to what ever page you want it to display initially.
0
 
LVL 32

Expert Comment

by:shalomc
ID: 10676330
Hey Brandwood,
Javascript includes do not support plain HTML, do they?

ShalomC
0
 

Expert Comment

by:Da_Samon
ID: 10676725
nah i was looking at them earlier, u need to format them all different (there a a few sites around that do it, but i want the included sites to be very easy to maintain, which is the main reason for doing it thisway. i may end up including the header on all the pages, OR using a web-server such as apache or tomcat to manage the server-side includes ...oh well :-)
0
 
LVL 1

Author Comment

by:SamShaw
ID: 10676754
Da_Samon, who are you? this is my post...if you arent contributing, please do not post here.
0
 
LVL 1

Expert Comment

by:Brandwood
ID: 10676771
oops sorry noop
0
 

Expert Comment

by:Da_Samon
ID: 10676806
I was contributing, i was quoting another site, thats all. sure i forgot to include my source but...relax dude.
0
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 

Expert Comment

by:Da_Samon
ID: 10676826
What i was quoting was a guy who asked an almost identical question on another forum, and ended up resolving that it was impossible....but...if you can do it...good on you!
0
 
LVL 1

Author Comment

by:SamShaw
ID: 10676845
oh, okay, sorry to jump down your thoat... :-)

thanks, i think i am coming to a similar resolution myself...unfortunately...:(
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 10676996
shalomc,

What makes you think XMLHTTP is IE only?  The Mozilla version is far superior because it does not use active.  I why support for only one of the MS versions?

SamShaw,

You can use this script to bring external include files into a layer in the page, or insert the text inline:

<script type='text/javascript'>
<!--
function include(lyr,url)
{
   if (document.all)
   {
      // IE version
      try {
      var xml = new ActiveXObject("Microsoft.XMLHTTP");
      // some versions of IE4 and some IE5.0) might be using MSXML2.XMLHTTP.4.0
      xml.Open( "GET", url, false );
      xml.Send()
      document.getElementById(lyr).innerHTML=xml.responseText;
       }
      catch (e) {
      var xml = new ActiveXObject("MSXML2.XMLHTTP.4.0");
      xml.Open( "GET", url, false );
      xml.Send()
      document.getElementById(lyr).innerHTML=xml.responseText;
      }
   }
   else
   {
      // Mozilla/Netscrap 6+ version
            var xml=new XMLHttpRequest();
            xml.open("GET",url,false);
            xml.send(null);
            document.getElementById(lyr).innerHTML=xml.responseText;
   }
}
//-->
</script>
You can trigger the script off the load:
<body onLoad="include('somediv','http://somepath/somefile.html'">
where somediv looks like: <div id="somediv">&nbsp;</div>

Or dynamically from a link:
<a href="#" onClick="include('somediv','http://somepath/somefile.html');return false">
   load alternate page
</a>

or inline as a conventional include:

<script language='JavaScript'>
   document.write('<div id="somediv">&nbsp;</div>');
   include('somediv','http://somepath/somefile.html');
</script>

If the string returned from the call contains valid HTML it will be rendered, otherwise it will display as plain text.

Does not work for older browser like Netscrap 4.x that do not know what XML is.

It can produce an alert if the user security settings have activeX disabled

You must test it with a server, it does not work from the local drive. The http:protocol requires a web server to service the call.

Cd&
0
 
LVL 33

Expert Comment

by:knightEknight
ID: 10677051
Here's another version:

<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://www.yourserver.com/includes/yourfile.html");
</SCRIPT>
</div>


</body>
</html>
0
 
LVL 1

Author Comment

by:SamShaw
ID: 10684520
I am thinking i might use IFFRAME, i followed the link from g_damodar (http://www.cryer.co.uk/resources/javascript/script4.htm) and am wondering if it is possible to have it automatically resize in height to fit the page being displayed in it? otherwise it is great, works perfectly. If not able to resize this way, can it austomatically resize to a certain percent of the page height ( that is the one that is containing the IFRAME, the index.htm page), like say 60% or something?

Thanks.
SamShaw
0
 
LVL 1

Author Comment

by:SamShaw
ID: 10684546
COBOLdinosaur: Sorry but this page MUST be able to run without any sort if web server, as it is required to be run on a single fileserver as simple HTML pages (as in like '\\server2\staff\intranet\staff\index.htm', not http://blah-blah-blah)

0
 

Expert Comment

by:sjmcd
ID: 10694268
you could use javascript to do what i do with php, like this:

<script>
    <!--
    page = document.location.href.split('?')[1].split('=')[1]; // requires ?page=something in url
    if(page == "page1"){
        document.write("page1 content");
    }
    elseif(page == "page2"){
        document.write("page2 content");
    }
    // and keep going until the end, where you could put:
    else {
        document.write("error message");
    }
    -->
</script>
0
 
LVL 1

Assisted Solution

by:NBstrat
NBstrat earned 20 total points
ID: 10696990
Fancy SSI servers? You can set up a small intranet on the cheap, be able to use INCLUDES and respond to  http requests. I have some set up at my current employers running on a Windows NT Workstation (not NT server) and another using Linux 6.3 Both "servers" are really just old PII workstations with 64 - 128MB memory that were upgraded and taken out of normal service. Perfect for light duty use (these average about 100 http request a day) and some file sharing duties. The "web server" name is cheapserver and all internal request to http://cheapserver/name_of_file_here.html are returned the web page. Want to know more......just ask.
0
 

Expert Comment

by:Da_Samon
ID: 10702959
lombardp and g_damodar: I decided to go with IFRAMEs in the end, thankyou for the suggesitons. It's not ideal, as I have had to set a pixel value for the height (if anyone knows how to get around this, i'd love to hear it) but it works okay.

NBstrat and others: If the school likes it, they MIGHT be willing to impliment a webserver of soem kind, but for the moment IFRAMEs it is.

Thankyou everyone for your suggestions, sorry that i left it so long and stuffed you around.

Da_Samon
0
 
LVL 1

Author Comment

by:SamShaw
ID: 10703006
Sorry guys, Da_Samon (who is Brad, the other guy who is working on this project with me) is trying to take over MY post :-)

But yeh, what he said is pretty good, i'll give lombard the points, with some for assistance to g_damodar and NBstrat. Thanks.

P.S. Brad, can u please leave my posts alone? GRRR :-)
0
 

Expert Comment

by:Da_Samon
ID: 10703076
Okay, sorry Sam, but i just thought it would ocnfuse everyone if i replied instead of you...;-) Anyway, no harm done, cya at school 2moro, u can bash me then ;-)

Da_Samon
0
 
LVL 1

Expert Comment

by:tekkiegeek
ID: 11438052
I know this question is answered, and points awarded but there is a way to do client side includes and you'd be using javascript.
0
 
LVL 9

Expert Comment

by:lombardp
ID: 11440576
Post your solution, please.
0
 
LVL 33

Expert Comment

by:knightEknight
ID: 11442249
javascript include function:



<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/includes/yourinclude.html/");
</SCRIPT>
</div>


</body>
</html>
0

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

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.
This article discusses four methods for overlaying images in a container on a web page
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…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

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

21 Experts available now in Live!

Get 1:1 Help Now