How to get the content of a html page from another html page?

Question

I am making an application where a header with some Menus and a footer will stay in all the pages. Now one way to this is write the code for header and footer in every page, which is a bad option. The other option is using iframe,which I am using. here is my code-

<div style="height:75%;width:98%;">
     <iframe name="someFrame" id="someFrame" frameborder="0" scrolling="yes" width="98%" height="100%"></iframe>
</div>

In this iframe I am calling the the contents of the other pages. I have one home page with a header and footer, and the middle portion will change using iframe. To achieve the overlapping of iframes perfectly I use a jquery function which is below.

<script>
    $("a").click(function(e) {
        e.preventDefault();
        $("#someFrame").attr("src", $(this).attr("href"));
        $("a").removeClass("active");
        $(this).addClass("active");
    })
</script>

Now what I need is - is there any other way to do it?? That I can make 2 different pages for header and footer, and get the contents in every page? using java?? or ajax or whatever.. Any help will be appreciable...

`Now one way to this is write the code for header and footer in every page, which is a bad option.` I would argue this option is 100x better than using an iframe, especially if you use includes. — Rory McCrossan, Nov 07 '14 at 09:45
Header and footer are serving the purpose. Why do you want to achieve the same tweaking iframe??? — Manoj Namodurai, Nov 07 '14 at 09:46
@ManoNamo It sounds to me like he's trying to use a template, or master page (whatever you want to call it). I get where he's coming from, but the iframe idea is horrible. — Reinstate Monica Cellio, Nov 07 '14 at 09:49
@Rory McCrossan can u give an example using "include". any link or some some code.. — Subho, Nov 07 '14 at 09:50
Just load different content into the page with load `$( "#result" ).load( "test.html #container" );` — Bojan Petkovski, Nov 07 '14 at 09:59
check this ans http://stackoverflow.com/questions/1088198/what-is-the-best-way-to-manage-duplicate-code-in-static-html-websites/1088236#1088236 or this http://stackoverflow.com/questions/8339085/html-inherit-page-layout — Aameer, Nov 07 '14 at 10:06
It will add the container part of the test.html in the result part of another page?? @Bojan Petkovski — Subho, Nov 07 '14 at 10:07
Check out Jade http://jade-lang.com It has includes and pretty much anything else. It compiles directly to html — ditoslav, Nov 07 '14 at 10:34

score 2 · Accepted Answer · answered Nov 07 '14 at 10:38

index.html

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").load("demo_test.html",function(responseTxt,statusTxt,xhr){
      if(statusTxt=="success")
        alert("External content loaded successfully!");
      if(statusTxt=="error")
        alert("Error: "+xhr.status+": "+xhr.statusText);
    });
  });
});
</script>
</head>
<body>

<div id="div1"><h2>Let jQuery AJAX Change This Text</h2></div>
<button>Get External Content</button>

</body>
</html>

demo_test.html

<h1>I am not part of this page</h1>

score 2 · Answer 2 · answered Nov 10 '14 at 05:43

There is another way to solve your difficulty.create a html file for menu named navbar_menu.html

navbar_menu.html

<ul>
    <li><a href='index.html' target="_top">Home</a></li>
    <li><a href='about.html' target="_top">About Us</a></li>
    <li><a href='' target="_blank">Ticket Sales</a></li>
    <li><a href='merch.html' target="_top">Merchandise</a>
        <ul>
            <li><a href='merch.html' target="_top">Products</a></li>
            <li><a href='cart.html' target="_top">Shopping Cart</a></li>
        </ul>
    </li>
    <li><a href='past.html' target="_top">Past Shows</a>
        <ul>
            <li><a href='photos.html' target="_top">Photo Gallery</a></li>
            <li><a href='vids.html' target="_top">Video Clips</a></li>
        </ul>
    </li>
</ul>

In another html page say index.html. In index.html page code:

<!DOCTYPE html>
  <html>
    <head>
       <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">            </script>
      <script>
         $(document).ready(function(){ 
                $.get("navbar_menu.html", function(data) {
                                                          $("#header").html(data);
                                                           });
              }); 
       </script>
  </head>
 <body>
   <div id="header"></div>
 </body>
 </html>

score 1 · Answer 3 · answered Nov 07 '14 at 10:46

1

The standard way to achieve this would be to use PHP. In the page where you want the header html included add in: <?php include 'header.html';?> Then change the extension of the pages you put this code into to .PHP instead of .HTML .

answered Nov 07 '14 at 10:46

David Clarke

63
1
6

score 0 · Answer 4 · edited Nov 07 '14 at 10:29

0

You can use jquery load function to load the content into a container div.This way we can have separate fragments for header and footer and be reused across pages

For example

$('#headercontainer').load('ajax/header.html #header')

Please see

 [http://api.jquery.com/load][1]

Hope this helps

edited Nov 07 '14 at 10:29

Ashok Rathod

840
9
24

answered Nov 07 '14 at 10:09

Rahul Ravindran

318
3
11

score 0 · Answer 5 · answered Nov 07 '14 at 11:23

Why not just use Asp.net with master pages. You can have a desktop and a mobile master page where you write the header, menu and footer once, then you just add content pages.

It also gives you a programming language to use. C# will allow you to do way more than just HTML and JavaScript. Plus you can setup web user controls and black box your controls.

If youre interested check out the free microsoft IDE at http://www.visualstudio.com/en-us/products/visual-studio-express-vs.aspx

How to get the content of a html page from another html page?

5 Answers5