将两个不同的html页面内容复制到一个页面中答案

【问题标题】：Copy two different html pages content into one page将两个不同的html页面内容复制到一个页面中
【发布时间】：2015-09-10 15:46:03
【问题描述】：

我有 2 个不同的静态 html 页面（a.html 和 b.html），我想将这 2 个 html 页面的内容复制到 c.html 页面中。我经历了这个Link。任何解决方案如何将两个 html 页面内容复制到一个页面中？？

任何 JQuery 或 JavaScript 逻辑？？

【问题讨论】：

为什么不在服务器端生成呢？
正如@messerbill 所说，服务器端生成是您的朋友。如果你不能这样做，也许可以向服务器发出 AJAX 请求以获取 a.html 和 b.html 并将它们组合起来，然后将它们附加到 c.html 中的某个容器中？
api.jquery.com/jquery.ajax
可能是淘汰模板或组件knockoutjs.com/documentation/component-overview.html

标签： javascript jquery html

【解决方案1】：

您可以使用 jquery。例如：

$( "#a" ).load( "article.html" );
$( "#b" ).load( "article2.html" );

如果您不想拆分内容，则使用 append() 函数。类似的东西……

【讨论】：

【解决方案2】：

HTML 框架可用于拆分网页，以便您可以将多个 HTML 文件或页面加载到一个网页中。这将导致网络浏览器一次显示多个页面。我喜欢使用的这种技术的一个常见示例是在浏览器窗口的左侧显示带有描述和链接的文档索引，因此当读者单击链接时，该页面将显示在右侧浏览器窗口。

<html>
      <head>
        <title>Multiple pages in one page</title>
      <head>
      <frameset border="1" cols="200,*" frameBorder="0" frameSpacing="4">
        <noframes>
          <body>
            <p>
             You should include HTML here to support webcrawlers and browsers that don't support frames.  
             You may want to include a second copy of your index, and set your wallpaper and colors
            in the BODY statement above the same as you would in your index file.
           </p>
         </body>
        </noframes>
        <frame name="left" src="htmlindex.html">
        <frame name="right" src="htmlintroduction.html">
      </frameset>
  </html>

【讨论】：

【解决方案3】：

在你的 c.html 上有一个 div 容器。您希望每个 html 内容都有一个容器，以便您可以指定要附加的 html 的位置。

<div id="container">
    <div id="a">
    </div>
    <div id="b">
    </div>
</div>

进行 2 次 ajax 调用以附加 a.html 和 b.html 的内容

$("#a").append($.get("/a.html"));
$("#b").append($.get("/b.html"));

这当然更容易通过服务器端来完成，但如果你希望它全部是前端，这将起作用。

【讨论】：