Copy two different html pages content into one page

Question

I have 2 different static html pages(a.html and b.html) and I want to copy the the content of these 2 html pages into c.html page. I went through this Link. Any Solution that how can I copy two html pages contents into one page ??

Any JQuery or JavaScript logic ??

As @messerbill said, server-side generation is your friend. If you can't do that, maybe make an AJAX request to the server for `a.html` and `b.html` and combine them, then append them to some container in `c.html`? — Aeolingamenfel, Sep 10 '15 at 15:48
maybe knockout templates or components http://knockoutjs.com/documentation/component-overview.html — Alexan, Sep 10 '15 at 16:25

score 1 · Answer 1 · answered Sep 10 '15 at 15:54

1

You can use jquery. For example :

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

or using append() function if you not want to split content. Something like that...

answered Sep 10 '15 at 15:54

Nigrimmist

10,289
4
52
53

mattfetz · Answer 2 · 2015-09-10T16:19:11.910

Have a div container on your c.html. You want to have a container for each html content so that you can specify the location of the html being appended.

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

Make 2 ajax calls to append the contents of a.html and b.html

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

This of course is much easier to do via server side but if you want it to be all front end this will work.

L.Zak · Answer 3 · 2015-09-10T16:06:37.850

HTML Frames can be used to split a web page so you can load multiple HTML files or pages into one web page. This will cause the web browser to display multiple pages at one time. A common example of this technique which I like to use is to display an index of a document on the left side of the browser window with descriptions and links so when the reader clicks on the link, that page is displayed on the right side of the browser window.

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

Copy two different html pages content into one page

3 Answers3