loading a html file with another html file

Question

I'm trying to make a HTML page (lets say index.html) that will have a dynamic drop down menu. What i want to do is to keep my dropdown menu in a seperate html file(menu.html) so that it will be easier to maintian. What i want to know is that how to load the menu.html file within the index.html file?

I have tried with some frame examples but the menu.html file which contains the DD menu doesnot appear in the index page.

Like for example, I have tried with this in my index page but nothing appears:

<frameset rows="200,*" frameborder="0" border="0" framespacing="0">
<frame src="menu.html" marginheight="0" marginwidth="0" scrolling="auto" noresize>

If you use the iframe tag, don't forget to add a width and height. — T. Junghans, Mar 12 '12 at 12:05
Better use a dynamic language for web like php. I suggest this tutorial http://tutorialzine.com/2011/08/jquery-mobile-mvc-website-part-2/ — dotoree, Mar 12 '12 at 12:05
Solution available here: http://stackoverflow.com/questions/39447411/how-to-load-nav-menu-from-an-external-file-no-wamp-all-code-must-be-browser — Gabriel, Sep 12 '16 at 17:10

score 1 · Accepted Answer · answered Mar 12 '12 at 12:09

If you want to stay in HTML, uses : <iframe src="menu.html" width=400 height=200></iframe> with the width and height you want.

But the best is to use PHP by including the file like this :
<?php include('menu.html'); ?>

But it is your choice at the end.

score 0 · Answer 2 · answered Aug 07 '13 at 13:51

0

Using jQuery you can handle it

<html> 
  <head> 
    <script src="jquery.js"></script> 
    <script> 
    $(function(){
      $("#divId").load("b.html"); 
    });
    </script> 
  </head> 

  <body> 
     <div id="divId"></div>
  </body> 
</html>

answered Aug 07 '13 at 13:51

DIXON THANKACHAN

209
2
3

score 0 · Answer 3 · answered Mar 12 '12 at 12:07

0

Try specifying the column width as described here.

<frameset cols="100%">
  <frameset rows="200, *">

answered Mar 12 '12 at 12:07

T. Junghans

11,385
7
52
75

score 0 · Answer 4 · answered Mar 12 '12 at 12:07

If you use php you can simply include it. here is a link to a tutorial to show you how to do this tutorial. If you don't use php then ignore this answer, but far better this than frames which have a lot of restrictions on how the content might be shown.

score 0 · Answer 5 · answered Mar 12 '12 at 12:10

0

You can use jQuery and the .load() function for this purpose.

Example:

jQuery:

$(function() {
    $("#menu").load("menu.html");
});

HTML:

<div id="menu">
</div>

answered Mar 12 '12 at 12:10

Rupo

402
3
8

loading a html file with another html file

5 Answers5