Solved

How do I import the html code held in a different file into my current html file (the equivalent of a #include in C)?

Posted on 2006-11-03
12
191 Views
Last Modified: 2013-11-18
I have a menu defined in a html file called menu.html.
I want to read this menu into each html page of my web site.
Do you know the html command this i need in order to import the menu code?
What I am after is the equivalent of a #include in C

Thanks very much!
0
Comment
Question by:adr2205
  • 5
  • 3
  • 2
  • +1
12 Comments
 
LVL 15

Expert Comment

by:mattisflones
ID: 17870412
Your only opt is to use frames or Iframes.
You need server side technology to do a include.
0
 
LVL 54

Expert Comment

by:b0lsc0tt
ID: 17870524
adr2205,

Frames or iframes would change the look and not be the best option for a menu and similar code blocks.  Server side languages will support what you want to do.  Let us know which you can use.  You will need to change you html page to a server side page but that may not require big changes to the page.  Another option is to use SSI (server side includes).  This also needs server support but can be done with an html page just with a different extension.

The best option is the server language but check and see what your server supports.  Let us know and we can tell you how to do an include.

bol

Let me know if you have any questions or need more information.

b0lsc0tt
0
 
LVL 54

Expert Comment

by:b0lsc0tt
ID: 17870558
If ASP then an include line would look like ...

 <!--#include file="includefile.asp" -->

If PHP then ...

  include "includefile.php";

Those are just a couple of examples.
0
 

Author Comment

by:adr2205
ID: 17870627
great thanks b0lsc0tt - I think SSI is the best way - how would I go about changing my html menu page to use the SSI? Thanks for your help
0
 
LVL 15

Expert Comment

by:mattisflones
ID: 17870665
You cant use SSI in html pages.
You need to use a server side technology like ASP or PHP.
What kind of webserver do you use?
0
 
LVL 54

Expert Comment

by:b0lsc0tt
ID: 17870715
@Mattisflones -
> You cant use SSI in html pages.
Actually you can.  I probably should've provided a little more information though so thanks for giving me the chance.  Usually the server requires you to change the file extension to .shtml.  The page does not have any other server side script but can use an include line.  The include line is usually just like the one ASP uses.  The key, like you pointed out in your first comment, is what the server supports.

bol
0
Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

 
LVL 15

Expert Comment

by:mattisflones
ID: 17870940
:-) Good clear-up..
I dont think of shtml as html, as you can see.. different extensions, different pagetypes.

0
 
LVL 1

Expert Comment

by:kurnia
ID: 17872167
If you don't want to work with PHP, ASP or any server side scripting, you can try AJAX.
Just create a function in javascript, that call on page load. In those function, let AjAX request your menu.html, than display it with simple asignment of .innerHTML.

Can you give us the menu.html?
0
 

Author Comment

by:adr2205
ID: 17872328
Here is my menu.html file as it is at the moment. It pulls in some javascript code from menu.js to control display of sub-menu options in nice drop down menu options. If I now create an index.html file, how would I import this code in so the menu displays on the index.html page? Obviously I dont want to copy and paste the menu onto every page of the site - a nice import command on each page would be great. Thanks for all of your help.

<html>
<head>
<link rel="stylesheet" rev="stylesheet" href="menu.css" />
<script type="text/javascript" language="Javascript" src="menu.js">
</script>
</head>
<body>
<div style="width: 89px">
<a href="menu0.html" class="menuLink">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Home&nbsp;&nbsp;| </a>
<ul class="menu" id="menu0">
</ul>
</div>
<div style="width: 92px">
<a href="menu1.html" class="menuLink">Option 1&nbsp;&nbsp;| </a>
<ul class="menu" id="menu1">
      <li><a href="m1.html">MPage1</a></li>
      <li><a href="m2.html">MPage2</a></li>
</ul>
</div>
<div style="width: 81px">
<a href="menu2.html" class="menuLink">Option 2&nbsp;&nbsp;| </a>
<ul class="menu" id="menu2">
      <li><a href="v1.html">VPage1</a></li>
      <li><a href="v2.html">VPage2</a></li>
</ul>
</div>
<div style="width: 90px">
<a href="menu3.html" class="menuLink">Option 3&nbsp;&nbsp;| </a>
<ul class="menu" id="menu3">
      <li><a href="f1.html">FPage1</a></li>
      <li><a href="f2.html">FPage2</a></li>
</ul>
</div>
<div style="width: 55px">
<a href="menu4.html" class="menuLink">Option 4&nbsp;&nbsp;| </a>
<ul class="menu" id="menu4">
      <li><a href="e1.html">EPage1</a></li>
      <li><a href="e2.html">EPage2</a></li>
</ul>
</div>
<div style="width: 84px">
<a href="menu5.html" class="menuLink">Option 5&nbsp;&nbsp;| </a>
<ul class="menu" id="menu5">
      <li><a href="p1.html">PPage1</a></li>
      <li><a href="p2.html">PPage2</a></li>
</ul>
</div>
<div style="width: 77px">
<a href="menu6.html" class="menuLink">Option 6&nbsp;&nbsp;| </a>
<ul class="menu" id="menu6">
      <li><a href="h1.html">HPage1</a></li>
      <li><a href="h2.html">HPage2</a></li>
</ul>
</div>
<div style="width: 79px">
<a href="menu7.html" class="menuLink">Option 7&nbsp;&nbsp;| </a>
<ul class="menu" id="menu7">
      <li><a href="c1.html">CPage1</a></li>
      <li><a href="c2.html">CPage2</a></li>
</ul>
</div>
<div style="width: 62px">
<a href="menu8.html" class="menuLink">Option 8 </a>
<ul class="menu" id="menu8">
      <li><a href="g1.html">GPage1</a></li>
      <li><a href="g2.html">GPage2</a></li>
</ul>
</div>
</body>
</html>

The menu.js file has the following content:

window.onload = initAll;

function initAll() {
      var allLinks = document.getElementsByTagName("a");

      for (var i=0; i<allLinks.length; i++) {
            if (allLinks[i].className.indexOf("menuLink") > -1) {
                  allLinks[i].onclick = function() {return false;}
                  allLinks[i].onmouseover = toggleMenu;
            }
      }
}

function toggleMenu() {
      var startMenu = this.href.lastIndexOf("/")+1;
      var stopMenu = this.href.lastIndexOf(".");
      var thisMenuName = this.href.substring(startMenu, stopMenu);

      document.getElementById(thisMenuName).style.display = "block";

      this.parentNode.className = thisMenuName;
      this.parentNode.onmouseout = toggleDivOff;
      this.parentNode.onmouseover = toggleDivOn;
}

function toggleDivOn() {
      document.getElementById(this.className).style.display = "block";
}

function toggleDivOff() {
      document.getElementById(this.className).style.display = "none";
}
0
 
LVL 54

Accepted Solution

by:
b0lsc0tt earned 65 total points
ID: 17874082
You would take just the common html code and put it in a separate include file.  Then you use the include statement to "add" the file to your html file.  In this basic example it looks like the code below is the common code (named includefile.asp in this example):

<div style="width: 89px">
<a href="menu0.html" class="menuLink">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Home&nbsp;&nbsp;| </a>
<ul class="menu" id="menu0">
</ul>
</div>
<div style="width: 92px">
<a href="menu1.html" class="menuLink">Option 1&nbsp;&nbsp;| </a>
<ul class="menu" id="menu1">
     <li><a href="m1.html">MPage1</a></li>
     <li><a href="m2.html">MPage2</a></li>
</ul>
</div>
<div style="width: 81px">
<a href="menu2.html" class="menuLink">Option 2&nbsp;&nbsp;| </a>
<ul class="menu" id="menu2">
     <li><a href="v1.html">VPage1</a></li>
     <li><a href="v2.html">VPage2</a></li>
</ul>
</div>
<div style="width: 90px">
<a href="menu3.html" class="menuLink">Option 3&nbsp;&nbsp;| </a>
<ul class="menu" id="menu3">
     <li><a href="f1.html">FPage1</a></li>
     <li><a href="f2.html">FPage2</a></li>
</ul>
</div>
<div style="width: 55px">
<a href="menu4.html" class="menuLink">Option 4&nbsp;&nbsp;| </a>
<ul class="menu" id="menu4">
     <li><a href="e1.html">EPage1</a></li>
     <li><a href="e2.html">EPage2</a></li>
</ul>
</div>
<div style="width: 84px">
<a href="menu5.html" class="menuLink">Option 5&nbsp;&nbsp;| </a>
<ul class="menu" id="menu5">
     <li><a href="p1.html">PPage1</a></li>
     <li><a href="p2.html">PPage2</a></li>
</ul>
</div>
<div style="width: 77px">
<a href="menu6.html" class="menuLink">Option 6&nbsp;&nbsp;| </a>
<ul class="menu" id="menu6">
     <li><a href="h1.html">HPage1</a></li>
     <li><a href="h2.html">HPage2</a></li>
</ul>
</div>
<div style="width: 79px">
<a href="menu7.html" class="menuLink">Option 7&nbsp;&nbsp;| </a>
<ul class="menu" id="menu7">
     <li><a href="c1.html">CPage1</a></li>
     <li><a href="c2.html">CPage2</a></li>
</ul>
</div>
<div style="width: 62px">
<a href="menu8.html" class="menuLink">Option 8 </a>
<ul class="menu" id="menu8">
     <li><a href="g1.html">GPage1</a></li>
     <li><a href="g2.html">GPage2</a></li>
</ul>
</div>

You web page files would end up looking something like this ...

<html>
<head>
<link rel="stylesheet" rev="stylesheet" href="menu.css" />
<script type="text/javascript" language="Javascript" src="menu.js">
</script>
</head>
<body>

<!--#include file="includefile.asp" -->

</body>
</html>

However in order for you to use this your server needs to support it.  There are a number of different ways it may support it but you need to find out what your options are.  Please read the questions we asked in our previous comments and answer them.  If your web server doesn't support server includes or a server language then you will not be able to do it.

bol
0
 
LVL 1

Assisted Solution

by:kurnia
kurnia earned 60 total points
ID: 17875182
OK, this is my suggestion:
1. MOdify your menu.html, remove "html", "head", "script", and "body" tags. So it will from
<div style="width: 89px"> until </div>

2. Modify your menu.js, remove this line
window.onload = initAll;

3. Create new javascript file, "getmenu.js"
// deklarasi variabel global
  var http = createRequestObject(); // untuk manampung http request .. langsung dibuat
  var objRefresh = 0;
  var isBusy = false;
  var x=0;

  // fungsi ini digunakan untuk membentuk objek http request, terlebih dulu memeriksa
  // jenis browser, karena tiap browser (khususnya IE) punya cara tersendiri
  function createRequestObject()
  {
    var ro;
    var browser = navigator.appName;

    if(browser == "Microsoft Internet Explorer")
    {
      try {
        ro = new ActiveXObject("Msxml2.XMLHTTP");
      }
      catch (othermicrosoft) {
        try {
        ro = new ActiveXObject("Microsoft.XMLHTTP");
        }
        catch (failed) {
        ro = false;
        }
      }
    }
    else
    // on every other browser, we can directly create a new XMLHttpRequest object
    {
      try {
        ro = new XMLHttpRequest();
      }
      catch (failed) {
        ro = false;
      }
    }
    if (!ro)
      alert("Error initializing XMLHttpRequest!");
    else return ro;
  } // createRequestObject

  // fungsi menampilkan data yang diterima dari request ke server
  function showData(){
    if(http.readyState == 4) {
      var response = http.responseText;
      if (response.charAt(0)==0)
      {
        // jika nilainya kosong, kadang ada karakter NULL
        response = http.responseText.substring(2);
      }

      // tampilkan data
      var info = document.getElementById("dMenu");
      info.innerHTML = response;
      initAll();
    }
  }

  var currObj = "";

  // fungsi untuk melakukan pemanggilan data
  function getData() {
    /* ini dipakai jika proses akan dilakukan secara periodik
    //if (objRefresh) clearTimeout(objRefresh); // ini
    //objRefresh = setTimeout("getData()", 900000);
    */
    if (!isBusy)
    {
      isBusy = true;

      http.open("get", "menu.html",true);
      http.onreadystatechange = showData; // memanggil fungsi yang akan menampilkan data (INGAT: jangan pakai parameter, bisa error :( )
      http.send(null);
      isBusy = false;

    }

  } //getData

4. In your page:
  a. add include to "getmenu.js" and "menu.js"
  b. make an element (div, span etc) where the menu need to be placed, give id="dMenu". eg. "<div id='dMenu'></div>"
  c. call getData() function on page load <body onload="getData()">

getData() function will get menu.html, replace <div id="dMenu"> content with content of menu.html, then call initAll() function.

Here sample page:
<html>
<head>
<link rel="stylesheet" rev="stylesheet" href="menu.css" />
<script language="Javascript" src="menu.js"></script>
<script language="Javascript" src="getmenu.js"></script>
</head>
<body onload="getData()">
 Menu list will shown below:
 <br>
 <div id="dMenu"></div>
</body>
</html>
0
 
LVL 54

Expert Comment

by:b0lsc0tt
ID: 17882244
I'm glad that I could be one of those that helped you.  Thank you for the grade, the points and the fun question.

bol
0

Featured Post

Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

Join & Write a Comment

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.
This article discusses how to create an extensible mechanism for linked drop downs.
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…

708 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

13 Experts available now in Live!

Get 1:1 Help Now