发表新帖
发表新帖

Multiple distinct pages in one HTML file

后端 未结
关注
12 994
爱一瞬间的悲伤
爱一瞬间的悲伤 2020-12-04 10:05

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 : cl
相关标签:
12条回答
  • 一生所求
    2020-12-04 10:31

    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.

    0 讨论(0)
  • 名媛妹妹
    2020-12-04 10:42

    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:

    <ul>
    <li>Click <a href="#one">here</a> for page 1</li>
    <li>Click <a href="#two">here</a> for page 2</li>
</ul>

<div class="page" id="one">
    Content of page 1 goes here.

    <ul>
        <li><a href="#">Back</a></li>
        <li><a href="#two">Page 2</a></li>
    </ul>
</div>

<div class="page" id="two">
    Content of page 2 goes here.

    <ul style="margin-bottom: 100vh;">
        <li><a href="#">Back</a></li>
        <li><a href="#one">Page 1</a></li>
    </ul>
</div>

    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!

    0 讨论(0)
  • 时光取名叫无心
    2020-12-04 10:43

    have all the pages in distinct div areas

    <div style="" id="page1">
First Page Contents
</div>

<div style="display:none" id="page2">
Second Page Contents
</div>

    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();
    0 讨论(0)
  • 花落未央
    2020-12-04 10:45

    Well, you could, but you probably just want to have two sets of content in the same page, and switch between them. Example:

        <html>
    <head>
    <script>
    function show(shown, hidden) {
      document.getElementById(shown).style.display='block';
      document.getElementById(hidden).style.display='none';
      return false;
    }
    </script>
    </head>
    <body>
    
      <div id="Page1">
        Content of page 1
        <a href="#" onclick="return show('Page2','Page1');">Show page 2</a>
      </div>
    
      <div id="Page2" style="display:none">
        Content of page 2
        <a href="#" onclick="return show('Page1','Page2');">Show page 1</a>
      </div>
    
    </body>
    </html>

    (Simplififed HTML code, should of course have doctype, etc.)

    0 讨论(0)
  • 鱼传尺愫
    2020-12-04 10:48

    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:

    <style>
.subpage { margin-bottom: 2048px; }
</style>
... main page ...

<div class="subpage">
<!-- 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! -->
</div>

<div class="subpage">
</div>

<div class="subpage">
</div>

    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:

    <a href="data:text/html;charset=utf-8,<h3>FOO</h3>">blah</a>

    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-embeffffded is large, and there are to be numerous links to it.

    0 讨论(0)
  • 無奈伤痛
    2020-12-04 10:49

    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.

    0 讨论(0)
 看不清?
提交回复
热议问题