Mai multe pagini distincte într-un singur fișier HTML (Programare, Html)

paperjam a intrebat.

Există vreo modalitate de a avea mai multe pagini HTML distincte conținute într-un singur fișier HTML? De exemplu, să presupunem că am un site web cu două pagini:

Page 1 : click here for page 2

și

Page 2 : click here for page 1

Pot să creez un singur fișier HTML care să încorporeze HTML static simplu pentru ambele pagini, dar să afișeze doar una la un moment dat? Paginile mele actuale sunt, desigur, mai complicate, cu imagini, tabele și javascript pentru a extinde rândurile din tabel. Aș prefera să evit prea mult cod script. Vă mulțumesc!

Comentarii

  • de ce ați vrea să evitați două pagini hmtl? –  > Por Tim B James.
  • Am un program care descarcă mii de fișiere HTML mici, interconectate, ca ieșire de depanare. Ar fi mult mai convenabil să am doar un singur fișier de ieșire. –  > Por paperjam.
  • „de ce ai vrea să” sunt întrebări neconstructive. Să presupunem că vreau să dau cuiva un singur fișier „foo.html” care pare să aibă mai multe pagini în el, mai degrabă decât un „foo.zip” pe care trebuie să-l despacheteze undeva și apoi să găsească „index.html” în el. –  > Por Kaz.
12 răspunsuri
Guffa

Ei bine, dvs. ar putea, dar probabil că vrei doar să ai două seturi de conținut în aceeași pagină și să treci de la unul la altul. Exemplu:

(Cod HTML simplificat, ar trebui să aibă, desigur, doctype, etc.)

Comentarii

  • Voiam ceva de genul celor de mai sus, ca să pot avea o versiune în engleză și una în franceză a paginilor web conținute într-un singur fișier DAR dacă fac asta cum ar funcționa link-urile către mai multe pagini și să le păstrez în limba aleasă? –  > Por Poiple Shadow.
  • @PoipleShadow: Ar trebui să includeți limba aleasă în cerere atunci când mergeți la o altă pagină. Practic, asta înseamnă fie să o pui într-un cookie, fie să o pui în șirul de interogare al URL-ului. –  > Por Guffa.
  • Mulțumesc Guffa, am adăugat această întrebare care ar putea să-ți dea o idee mai bună despre ceea ce urmăresc – stackoverflow.com/questions/25591099/… –  > Por Poiple Shadow.
topherg

să am toate paginile în zone div distincte

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

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

apoi folosiți un script js pentru a prelucra ceea ce vizualizați (ca în cadrul unui stil hashtag) pentru a naviga. Fie asta, fie ajax pentru a obține răspunsul de la un fișier specific (cum ar fi /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();

Comentarii

  • Mulțumesc pentru răspunsul tău cgoddard, JS pare un pic cam greoi – chiar avem nevoie de o buclă? Nu se poate ca un clic pe un hyperlink să seteze direct display="none" pe subpagina curentă și display="" pe subpagina legată? –  > Por paperjam.
  • da, s-ar putea face, ar fi mai rapid, dar bucla este concepută doar pentru a acționa ca un captator de hashchange, deoarece această funcție nu este susținută de câteva browsere. ați putea face, doar să înlocuiți hashchanged cu o funcție pentru schimbarea paginii, iar în loc de partea de căutare să fie location.hash, să folosiți doar un argument pentru funcție. probabil că este prea complicat un pic –  > Por topherg.
  • Aceasta este o implementare excelentă. Minunată. Dacă folosim jQuery, ați putea face ceva de genul: $(‘#pagina1,#pagina2’).fadeToggle() sau $(‘#pagina1 ,#pagina2’).toggle(); pentru a face un pic mai elegant. Și, de asemenea, puteți lega o funcție callback dacă este necesar. –  > Por Meowtwo 117.
Ashwin Krishnamurthy

Ați luat în considerare iframes sau să vă separați conținutul și să folosiți o simplă afișare/ascundere?

Editează Dacă doriți să folosiți un iframe, puteți avea conținutul paginii1 și al paginii2 într-un singur fișier html. Apoi, puteți decide ce să arătați sau să ascundeți citind location.search a iframe-ului. Deci codul tău poate fi așa :

Pentru pagina 1 : iframe.src = "mypage.html?show=1"

Pentru pagina 2 : iframe.src = "mypage.html?show=2"

Acum, atunci când se încarcă iframe-ul, puteți utiliza funcția location.search.split("=")[1], pentru a obține valoarea numărului de pagină și a afișa conținutul în mod corespunzător. Acest lucru este doar pentru a arăta că iframe-urile pot fi de asemenea folosite, dar utilizarea este mai complexă decât afișarea/lipsa normală folosind structuri div.

Comentarii

  • utilizatorul ar trebui să creeze fie două pagini html, fie să scrie cod în pagina html care este încărcată în iframe pentru a afișa conținuturi diferite. –  > Por Tim B James.
  • Nu cred că acest lucru merită un downvote pentru că am două opțiuni în postarea mea. În plus, iframe este de asemenea o opțiune de urmat, singurul său dezavantaj fiind complicația și codificarea suplimentară necesară. –  > Por Ashwin Krishnamurthy.
Dinesh P.R.

JQuery Mobile are mai multe pagini caracteristică. Dar nu sunt sigur în ceea ce privește aplicațiile web desktop.

Comentarii

Reece Holmdahl

Acest lucru este un fel de suprapunere a lucrului de o pagină, dar… Ați putea folosi iframe în HTML.

<html>
<body>
<iframe src="page1.html" border="0"></iframe>
</body>
</html>

Iar pagina1.html ar fi pagina dvs. de bază. Tot mai faci mai multe pagini, dar browserul tău nu se mișcă. Să spunem că este index.html. Aveți file, faceți clic pe pagina 2, url-ul nu se va schimba, dar pagina se va schimba. Totul în iframe. Singurul lucru diferit este că puteți vedea și sursa cadrului.

Binz Nakama

Am folosit următorul truc pentru aceeași problemă. Partea bună este că nu necesită niciun 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>

Vedeți un JSFiddle.

Avantaj suplimentar: pe măsură ce url-ul se modifică, îl puteți utiliza pentru a crea legături către anumite pagini. Acest lucru este ceva ce metoda nu vă permite să faceți.

Sper să vă fie de ajutor!

rocketserver

Înregistrare ecran

Ați putea folosi Colker, care este construit pentru acest lucru, dar va trebui să eliminați caseta de căutare și codul funcției de căutare, deoarece căutarea nu este compatibilă cu tipul de conținut pe care intenționați să îl utilizați.

Conținutul paginii este stocat într-un fișier java-script array, iar elementul „page” (de exemplu: ?page=pagename) parametrul URL determină ce conținut de pagină trebuie să servească.

negas

Twine este un instrument cu sursă deschisă pentru a spune povești interactive și neliniare. Generează un singur html cu mai multe pagini. poate că nu este instrumentul potrivit pentru tine, dar ar putea fi util pentru altcineva care caută ceva similar.

Quentin

Este, în teorie, posibil folosind data: scheme URI și cadre, dar este destul de departe de a fi practic.

Poți să te prefaci ascunzând niște conținut cu JS și apoi dezvăluindu-l atunci când se dă click pe ceva (în stilul lui tabtastic).

Comentarii

  • De ce ar fi nepractic? –  > Por Anderson Green.
Kaz

Soluția 1

O soluție pentru acest lucru, care nu necesită JavaScript, este pur și simplu să creați o singură pagină în care mai multe pagini sunt pur și simplu conținut obișnuit care este separat de o mulțime de spațiu alb. Acestea pot fi înfășurate în div containere, iar o foaie de stil inline le poate înzestra cu margine:

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

Ați înțeles imaginea. Fiecare „pagină” este doar o secțiune urmată de o cantitate uriașă de spațiu vertical pentru ca următoarea să nu se vadă.

Folosesc acest truc pentru a adăuga „linkuri de navigare de dezambiguizare” într-un document de mari dimensiuni (peste 430 de pagini în forma sa PDF în format letric), pe care aș prefera cu mult mai mult să îl păstrez ca un singur .html fișier. Subliniez că nu este vorba de un site web, ci de un document.

Atunci când utilizatorul face clic pe un hyperlink cu un cuvânt cheie din document pentru care există mai multe subiecte posibile asociate cuvântului, utilizatorul este direcționat către un mic meniu de navigare care prezintă mai multe opțiuni de subiecte. Acest meniu apare în partea de sus a ceea ce pare a fi o fereastră goală a browserului și, astfel, seamănă efectiv cu o pagină.

Singurul indiciu că meniul nu este o pagină separată este starea barei de defilare verticală a browserului, care este în mare măsură irelevantă în acest caz de utilizare a navigației. Dacă utilizatorul observă acest lucru și începe să deruleze, întregul șiretlic este dezvăluit, moment în care utilizatorul va zâmbi și va aprecia faptul că nu a fost nevoit să despacheteze un .zip fișier plin de pagini mici și de a merge la vânătoare de index.html.

Soluția 2

De fapt, este posibil să încorporați o pagină HTML în HTML. Acest lucru se poate face utilizând metoda oarecum obscură data: URL în fișierul href atribut. Ca un test simplu, încercați să lipiți acest lucru undeva într-o pagină HTML:

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

În Firefox, obțin un hyperlink „blah”, care navighează către o pagină care afișează FOO titlu. (Rețineți că nu am aici o pagină HTML complet formată, ci doar un fragment HTML; este doar un exemplu de bună ziua).

Dezavantajul acestei tehnici este că întreaga pagină țintă se află în URL, care este băgată în caseta de introducere a adresei din browser.

Dacă este mare, ar putea întâmpina unele probleme, poate specifice browserului; nu am prea multă experiență în acest sens.

Un alt dezavantaj este faptul că întregul HTML trebuie să fie corect scăpat, astfel încât să poată apărea ca argument al instrucțiunii href atribut. Evident, nu poate conține nicăieri un caracter simplu de ghilimele duble.

Un al treilea dezavantaj este că fiecare astfel de link trebuie să reproducă atributul data: materialul, deoarece din punct de vedere semantic nu este deloc o legătură, ci o încorporare de tip copy and paste. Nu este o soluție atractivă în cazul în care pagina care urmează să fie încorporată este mare și trebuie să existe numeroase linkuri către ea.

Sean McDonald

mergând pe linia lui @binz-nakama, iată o actualizare a jsfiddle-ului său cu o cantitate foarte mică de javascript. de asemenea, include și acest lucru un articol foarte bun despre navigația css

actualizare a jsfiddle

Array.from(document.querySelectorAll("a"))
.map(x => x.addEventListener("click", 
  function(e){
    Array.from(document.querySelectorAll("a"))
    .map(x => x.classList.remove("active"));
    e.target.classList.add("active");    
  }
));

Alpha_Pi

Să spunem că aveți mai multe pagini, cu id-ul #page1 #page2 și #page3. #page1 este ID-ul paginii de start. Primul lucru pe care doriți să îl faceți este să redirecționați către pagina dvs. de start de fiecare dată când se încarcă pagina web. Acest lucru se face cu ajutorul javascript:

document.location.hash = "#page1";

Apoi, următorul lucru pe care doriți să îl faceți este să plasați câteva link-uri în documentul dvs. către diferite pagini, ca de exemplu:

<a href="#page2">Click here to get to page 2.</a>

Apoi, în cele din urmă, veți dori să vă asigurați că numai pagina activă sau pagina-țintă este vizibilă, iar toate celelalte pagini rămân ascunse. Acest lucru se face cu următoarele declarații în fișierul <style> element:

<style>
#page1 {display:none}
#page1:target {display:block}
#page2 {display:none}
#page2:target {display:block}
#page3 {display:none}
#page3:target {display:block}
</style>

Tags: