Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 7728
  • Last Modified:

HTML Client-Side Include - can i do it?

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
SamShaw
Asked:
SamShaw
  • 6
  • 5
  • 4
  • +8
3 Solutions
 
lombardpCommented:
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
 
shalomcCommented:
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
 
SamShawAuthor Commented:
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
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!

 
shalomcCommented:
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
 
BrandwoodCommented:
javascript includes are done like

<script language=javascript src="yourFile.htm" type=text/javascript></script>
0
 
BrandwoodCommented:
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
 
BrandwoodCommented:
change the src in the iframe tag to what ever page you want it to display initially.
0
 
shalomcCommented:
Hey Brandwood,
Javascript includes do not support plain HTML, do they?

ShalomC
0
 
Da_SamonCommented:
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
 
SamShawAuthor Commented:
Da_Samon, who are you? this is my post...if you arent contributing, please do not post here.
0
 
BrandwoodCommented:
oops sorry noop
0
 
Da_SamonCommented:
I was contributing, i was quoting another site, thats all. sure i forgot to include my source but...relax dude.
0
 
Da_SamonCommented:
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
 
SamShawAuthor Commented:
oh, okay, sorry to jump down your thoat... :-)

thanks, i think i am coming to a similar resolution myself...unfortunately...:(
0
 
COBOLdinosaurCommented:
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
 
knightEknightCommented:
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
 
SamShawAuthor Commented:
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
 
SamShawAuthor Commented:
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
 
sjmcdCommented:
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
 
NBstratCommented:
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
 
Da_SamonCommented:
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
 
SamShawAuthor Commented:
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
 
Da_SamonCommented:
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
 
tekkiegeekCommented:
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
 
lombardpCommented:
Post your solution, please.
0
 
knightEknightCommented:
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

Independent Software Vendors: 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!

  • 6
  • 5
  • 4
  • +8
Tackle projects and never again get stuck behind a technical roadblock.
Join Now