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

【问题标题】：How to get the content of a html page from another html page?如何从另一个 html 页面获取 html 页面的内容？
【发布时间】：2014-11-07 09:44:21
【问题描述】：

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

【问题讨论】：

Now one way to this is write the code for header and footer in every page, which is a bad option. 我认为这个选项比使用 iframe 好 100 倍，尤其是如果您使用包含。
页眉和页脚是为了达到目的。为什么要实现同样的调整iframe？？？
@ManoNamo 在我看来他正在尝试使用模板或母版页（无论您想如何称呼它）。我知道他来自哪里，但 iframe 的想法很糟糕。
@Rory McCrossan 你能举个例子吗？任何链接或一些代码..
只需将不同的内容加载到加载$( "#result" ).load( "test.html #container" );的页面中

标签： javascript jquery css html iframe

【解决方案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>

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

您可以使用jquery加载函数将内容加载到容器div中。这样我们可以有单独的页眉和页脚片段，并可以跨页面重用

例如

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

请看

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

希望对你有帮助

【讨论】：

【解决方案5】：

为什么不直接使用带有母版页的 Asp.net。您可以拥有一个桌面和一个移动母版页，您可以在其中编写一次页眉、菜单和页脚，然后您只需添加内容页。

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

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

【讨论】：