如何从另一个html页面获取html页面的内容？
[英]How to get the content of a html page from another html page?
问题描述
我正在创建一个应用程序，其中带有一些菜单和页脚的标题将保留在所有页面中。 现在，一种方法是在每个页面中编写页眉和页脚的代码，这是一个不好的选择。 另一种选择是使用我正在使用的iframe。 这是我的代码 -
<div style="height:75%;width:98%;">
<iframe name="someFrame" id="someFrame" frameborder="0" scrolling="yes" width="98%" height="100%"></iframe>
</div>
在这个iframe中，我调用其他页面的内容。 我有一个页眉和页脚的主页，中间部分将使用iframe更改。 为了完美地实现iframe的重叠，我使用了一个jquery函数，如下所示。
<script>
$("a").click(function(e) {
e.preventDefault();
$("#someFrame").attr("src", $(this).attr("href"));
$("a").removeClass("active");
$(this).addClass("active");
})
</script>
现在我需要的是 - 还有其他方法吗？ 我可以为页眉和页脚制作2个不同的页面，并在每个页面中获取内容？ 用java ?? ?? 或者ajax或者其他..任何帮助都会很明显......
5 个解决方案
解决方案1
1 已采纳 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>
解决方案2
1 2014-11-07 10:46:15
实现这一目标的标准方法是使用PHP。 在你想要包含标题html的页面中添加： <?php include 'header.html';?>然后将你输入此代码的页面的扩展名更改为.PHP而不是.HTML。
解决方案3
1 2014-11-10 05:43:03
还有另一种方法可以解决您的难题。为名为navbar_menu.html的菜单创建一个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>
在另一个html页面中说index.html。 在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(){
$.get("navbar_menu.html", function(data) {
$("#header").html(data);
});
});
</script>
</head>
<body>
<div id="header"></div>
</body>
</html>
解决方案4
0 2014-11-07 10:09:40
您可以使用jquery load函数将内容加载到容器div中。这样我们可以为页眉和页脚分别创建片段，并在页面中重复使用
例如
$('#headercontainer').load('ajax/header.html #header')
请参见
[http://api.jquery.com/load][1]
希望这可以帮助
解决方案5
0 2014-11-07 11:23:56
为什么不将Asp.net与主页一起使用。 您可以在桌面和移动母版页上编写标题，菜单和页脚一次，然后只需添加内容页面。
它还为您提供了一种编程语言。 C＃将允许您不仅仅是HTML和JavaScript。 另外，您可以设置Web用户控件和控件的黑盒子。
如果您有兴趣，请访问http://www.visualstudio.com/en-us/products/visual-studio-express-vs.aspx查看免费的Microsoft软件IDE 。
如何从另一个 HTML 页面获取元素
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.