Multiple distinct pages in one HTML file

Question

Is there any way to have multiple distinct HTML pages contained within a single HTML file   For example  suppose I have a website with two pages   Page 1   click here for page 2   and  Page 2   click here for page 1   Can I create a single HTML file that embeds simple static HTML for both pages but only displays one at a time   My actual pages are of course more complicated with images  tables and javascript to expand table rows   I would prefer to avoid too much script code   Thanks

User · Answer

Let s say you have multiple pages  with id  page1  page2 and  page3   page1 is the ID of your start page  The first thing you want to do is to redirect to your start page each time the webpage is loading  You do this with javascript   document location hash     page1     Then the next thing you want to do is place some links in your document to the different pages  like for example    lt a href   page2  gt Click here to get to page 2  lt  a gt    Then  lastly  you d want to make sure that only the active page  or target-page is visible  and all other pages stay hidden  You do this with the following declarations in the  lt style gt  element    lt style gt   page1  display none   page1 target  display block   page2  display none   page2 target  display block   page3  display none   page3 target  display block   lt  style gt

User · Answer

I used the following trick for the same problem  The good thing is it doesn t require any javascript   CSS    body        margin  0em      page       width  100vw      height  100vh      position  fixed      top  0      left  -100vw      overflow-y  auto      z-index  0      background-color  hsl 0 0  100          page target       left  0vw      z-index  1      HTML    lt ul gt       lt li gt Click  lt a href   one  gt here lt  a gt  for page 1 lt  li gt       lt li gt Click  lt a href   two  gt here lt  a gt  for page 2 lt  li gt   lt  ul gt    lt div class  page  id  one  gt      Content of page 1 goes here        lt ul gt           lt li gt  lt a href     gt Back lt  a gt  lt  li gt           lt li gt  lt a href   two  gt Page 2 lt  a gt  lt  li gt       lt  ul gt   lt  div gt    lt div class  page  id  two  gt      Content of page 2 goes here        lt ul style  margin-bottom  100vh   gt           lt li gt  lt a href     gt Back lt  a gt  lt  li gt           lt li gt  lt a href   one  gt Page 1 lt  a gt  lt  li gt       lt  ul gt   lt  div gt    See a JSFiddle   Added advantage  as your url changes along  you can use it to link to specific pages  This is something the  method won t let you do   Hope this helps

User · Answer

Screen Rec  You could use Colker  which is built for this  but you ll have to remove the search box  and search feature code  because searching isn t compatible with the type of content you intend to use   Page contents are stored in a java-script array  and the  page   eg   page pagename  URL parameter determines which page content to serve

User · Answer

going along with  binz-nakama  here s an update on his jsfiddle with a very small amount of javascript  also incoporates this very good article on css navigation   update on the jsfiddle  Array from document querySelectorAll  a     map x   gt  x addEventListener  click      function e       Array from document querySelectorAll  a         map x   gt  x classList remove  active         e target classList add  active

User · Answer

have all the pages in distinct div areas   lt div style    id  page1  gt  First Page Contents  lt  div gt    lt div style  display none  id  page2  gt  Second Page Contents  lt  div gt    then use a js script to workout what you are viewing  like within an hashtag style  to navigate  Either that  or ajax to get the response from a specific file  like  pages page1 html   var  prehashval       function loop         if  location hash slice 1    prehashval          hashChanged          prehashval   location hash slice 1       setTimeout  loop     100     function hashChanged         var  output      switch  location hash slice 1                 case  page1               document getElementById  page1   style display                   document getElementById  page2   style display    none               break          case  page2               document getElementById  page1   style display    none               document getElementById  page2   style display                   break          default               output   location hash slice 1           loop

User · Answer

Twine is an open-source tool for telling interactive  nonlinear stories   It generates a single html with multiples pages  Maybe it is not the right tool for you but it could be useful for someone else looking for something similar

User · Answer

This is kind of overriding the thing of one page  but    You could use iframes in HTML    lt html gt   lt body gt   lt iframe src  page1 html  border  0  gt  lt  iframe gt   lt  body gt   lt  html gt    And page1 html would be your base page  Your still making multiple pages  but your browser just doesn t move  So lets say thats your index html  You have tabs  you click page 2  your url wont change  but the page will  All in iframes  The only thing different  is that you can view the frame source as well

User · Answer

It is  in theory  possible using data  scheme URIs and frames  but that is rather a long way from practical   You can fake it by hiding some content with JS and then revealing it when something is clicked  in the style of tabtastic

User · Answer

Solution 1  One solution for this  not requiring any JavaScript  is simply to create a single page in which the multiple pages are simply regular content that is separated by a lot of white space  They can be wrapped into div containers  and an inline style sheet can endow them with the margin    lt style gt   subpage   margin-bottom  2048px     lt  style gt      main page       lt div class  subpage  gt   lt  -- first one is empty on purpose  just a place holder for margin       alternative is to use this for the main part of the page also  -- gt   lt  div gt    lt div class  subpage  gt   lt  div gt    lt div class  subpage  gt   lt  div gt    You get the picture  Each  page  is just a section followed by a whopping amount of vertical space so that the next one doesn t show   I m using this trick to add  disambiguation navigation links  into a large document  more than 430 pages long in its letter-sized PDF form   which I would greatly prefer to keep as a single  html file  I emphasize that this is not a web site  but a document   When the user clicks on a key word hyperlink in the document for which there are multiple possible topics associated with word  the user is taken a small navigation menu presenting several topic choices   This menu appears at top of what looks like a blank browser window  and so effectively looks like a page   The only clue that the menu isn t a separate page is the state of the browser s vertical scroll bar  which is largely irrelevant in this navigation use case   If the user notices that  and starts scrolling around  the whole ruse is revealed  at which point the user will smile and appreciate not having been required to unpack a  zip file full of little pages and go hunting for the index html   Solution 2  It s actually possible to embed a HTML page within HTML  It can be done using the somewhat obscure data  URL in the href attribute  As a simple test  try sticking this somewhere in a HTML page    lt a href  data text html charset utf-8  lt h3 gt FOO lt  h3 gt   gt blah lt  a gt    In Firefox  I get a  blah  hyperlink  which navigates to a page showing the FOO heading   Note that I don t have a fully formed HTML page here  just a HTML snippet  it s just a hello-world example    The downside of this technique is that the entire target page is in the URL  which is stuffed into the browser s address input box   If it is large  it could run into some issues  perhaps browser-specific  I don t have much experience with it   Another disadvantage is that the entire HTML has to be properly escaped so that it can appear as the argument of the href attribute  Obviously  it cannot contain a plain double quote character anywhere   A third disadvantage is that each such link has to replicates the data  material  since it isn t semantically a link at all  but a copy and paste embedding  It s not an attractive solution if the page-to-be-embeddded is large  and there are to be numerous links to it

User · Answer

JQuery Mobile has multipage feature   But I am not sure about Desktop Web Applications

User · Answer

Have you considered iframes or segregating your content and using a simple show hide   Edit If you want to use an iframe  you can have the contents of page1 and page2 in one html file  Then you can decide what to show or hide by reading the location search property of the iframe  So your code can be like this     For Page 1   iframe src    mypage html show 1   For Page 2   iframe src    mypage html show 2   Now  when your iframe loads  you can  use the location search split      1   to get the value of the page number and show the contents accordingly  This is just to show that iframes can also be used but the usage is more complex than the normal show hide using div structures

User · Answer

Well  you could  but you probably just want to have two sets of content in the same page  and switch between them  Example   x000D   x000D       lt html gt       lt head gt       lt script gt      function show shown  hidden          document getElementById shown  style display  block         document getElementById hidden  style display  none         return false             lt  script gt       lt  head gt       lt body gt              lt div id  Page1  gt          Content of page 1          lt a href     onclick  return show  Page2   Page1     gt Show page 2 lt  a gt         lt  div gt              lt div id  Page2  style  display none  gt          Content of page 2          lt a href     onclick  return show  Page1   Page2     gt Show page 1 lt  a gt         lt  div gt            lt  body gt       lt  html gt  x000D   x000D   x000D    Simplififed HTML code  should of course have doctype  etc

[html] Multiple distinct pages in one HTML file

Examples related to html