Question

我正在创建一个应用程序，其中包含一些菜单和页脚的标题将保留在所有页面中。现在，一种方法是在每个页面中编写页眉和页脚的代码，这是一个不好的选择。另一种选择是使用我正在使用的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或者其他..任何帮助都会很明显......

Answer 1

<强>的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>

Answer 2

实现这一目标的标准方法是使用PHP。在您希望包含标题html的页面中添加：<?php include 'header.html';?>然后将您将此代码放入的页面的扩展名更改为.PHP而不是.HTML。

Answer 3

还有另一种解决难度的方法。为名为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>

Answer 4

您可以使用jquery load函数将内容加载到容器div中。这样我们可以为页眉和页脚分别创建片段，并在页面中重复使用

例如

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

请参阅

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

希望这有帮助

Answer 5

为什么不将Asp.net与主页一起使用。您可以在桌面和移动母版页上编写标题，菜单和页脚一次，然后只需添加内容页面。

它还为您提供了一种编程语言。 C＃将允许您不仅仅是HTML和JavaScript。另外，您可以设置Web用户控件和控件的黑盒子。

如果您有兴趣，请查看http://www.visualstudio.com/en-us/products/visual-studio-express-vs.aspx

上的免费微软IDE

如何从另一个html页面获取html页面的内容？

5 个答案: