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

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...

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

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

Share asked Nov 7, 2014 at 9:44 Subho 9235 gold badges25 silver badges49 bronze badges

4 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 Commented Nov 7, 2014 at 9:45
Header and footer are serving the purpose. Why do you want to achieve the same tweaking iframe??? – Manoj Commented Nov 7, 2014 at 9:46
1 @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 ing from, but the iframe idea is horrible. – Reinstate Monica Cellio Commented Nov 7, 2014 at 9:49
@Rory McCrossan can u give an example using "include". any link or some some code.. – Subho Commented Nov 7, 2014 at 9:50
Just load different content into the page with load $( "#result" ).load( "test.html #container" ); – Bojan Petkovski Commented Nov 7, 2014 at 9:59

| Show 4 more ments

5 Answers 5

Sorted by: Reset to default 2

index.html

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis./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>

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./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>

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 .

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./load][1]

Hope this helps

Why not just use Asp 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./en-us/products/visual-studio-express-vs.aspx

发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745097812a4611088.html

javascript - How to get the content of a html page from another html page? - Stack Overflow

5 Answers 5

发表回复

评论列表（0条）

联系我们

400-800-8888

javascript - How to get the content of a html page from another html page? - Stack Overflow

5 Answers 5

相关推荐