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...
5 answers
solution1
1 ACCPTED 2014-11-07 10:38:23
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>
solution2
1 2014-11-07 10:46:15
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 .
solution3
1 2014-11-10 05:43:03
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>
solution4
0 2014-11-07 10:09:40
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
solution5
0 2014-11-07 11:23:56
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
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.