Plusieurs pages distinctes dans un fichier HTML
Est-il possible d'avoir plusieurs pages HTML contenu dans un seul fichier HTML? Par exemple, supposons que j'ai un site avec deux pages:
Page 1 : click here for page 2
et
Page 2 : click here for page 1
Puis-je créer un seul fichier HTML qui intègre simple en HTML statique pour les deux pages, mais affiche un seul à la fois? Mes pages sont bien sûr plus compliqué avec des images, des tableaux et javascript pour développer des lignes de la table. Je préfère éviter trop de code de script. Merci!
source d'informationauteur paperjam | 2011-11-21
Vous devez vous connecter pour publier un commentaire.
Bien, vous pourraitmais vous avez probablement juste envie d'avoir deux paires de contenu dans la même page, et de basculer entre eux. Exemple:
(Simplififed code HTML, doit avoir doctype, etc.)
ont toutes les pages distinctes div zones
ensuite utiliser un script js à la séance d'entraînement de ce que vous êtes (comme à l'intérieur d'un hashtag style) pour naviguer. Soit ça, ou ajax pour obtenir une réponse à partir d'un fichier spécifique (comme
/pages/page1.html
)Avez-vous envisagé de iframes ou de ségrégation votre contenu et à l'aide d'un simple afficher/masquer?
Modifier Si vous souhaitez utiliser un iframe, vous pouvez avoir le contenu de la page1 et page2 dans un fichier html. Ensuite, vous pouvez décider d'afficher ou de masquer par la lecture de la
location.search
propriété de l'iframe. Ainsi, votre code peut ressembler à ceci :Pour La Page 1 :
iframe.src = "mypage.html?show=1"
Pour La Page 2 :
iframe.src = "mypage.html?show=2"
Maintenant, quand votre iframe charge, vous pouvez utiliser le
location.search.split("=")[1]
pour obtenir la valeur du numéro de la page et afficher le contenu en conséquence. C'est juste pour montrer que les iframes peut également être utilisé, mais l'utilisation est plus complexe que la normale afficher/cacher l'aide de div structures.JQuery Mobile a multipage fonctionnalité. Mais je ne suis pas sûr au sujet des Applications Web de Bureau.
L'Écran Rec
Vous pouvez utiliser Colkerqui est conçu pour cela, mais vous aurez à supprimer la zone de recherche, et de la fonction de recherche de code, parce que la recherche n'est pas compatible avec le type de contenu que vous souhaitez utiliser.
Contenu de la Page sont stockés dans un
java-script array
et le "page
" (par exemple: ?page=pagename
) URL paramètre détermine le contenu de la page de servir.Il est possible, en théorie à l'aide de
data:
schéma d'Uri et des cadres, mais qui est plutôt un long chemin de la pratique.Vous pouvez faux en masquant certains contenus avec JS et révélant alors quand quelque chose est activé (dans le style de tabtastic).
C'est une sorte de substitution de la chose d'une page, mais... Vous pouvez utiliser des iframes dans HTML.
Et page1.html serait votre page de base. Votre toujours de faire plusieurs pages, mais votre navigateur ne bouge pas. Donc disons que c'est votre index.html. Vous avez des onglets, vous cliquez sur la page 2, de votre url ne changeront pas, mais la page. Le tout dans des iframes. La seule chose différente, c'est qu'il vous permet d'afficher l'image source.
Solution 1
Une solution pour ce faire, ne nécessitant pas de JavaScript, est de simplement créer une page dans laquelle les multiples pages sont tout simplement contenu régulier, qui est séparé par beaucoup d'espace blanc. Ils peuvent être enveloppés dans des
div
conteneurs, et une ligne de la feuille de style peut leur conférer la marge:Vous obtenez l'image. Chaque "page" est juste une section suivie par une énorme quantité d'espace vertical, de sorte que le suivant ne montre pas.
Je suis en utilisant cette astuce d'ajouter "l'ambiguïté des liens de navigation" dans un document volumineux (plus de 430 pages, dans sa lettre de la taille d'un formulaire PDF), je vous en serais très préférez garder qu'un seul
.html
fichier. Je tiens à souligner que ce n'est pas un site web, mais un document.Lorsque l'utilisateur clique sur un mot-clé lien hypertexte dans le document pour lequel il y a plusieurs sujets possibles associés avec word, l'utilisateur est pris un petit menu de navigation présentant plusieurs sujet de choix. Ce menu s'affiche au-dessus de ce qui ressemble à une fenêtre vide, et donc, effectivement ressemble à une page.
Le seul indice que le menu n'est pas une page séparée est l'état du navigateur la barre de défilement verticale, ce qui est largement hors de propos dans cette navigation de cas d'utilisation. Si l'utilisateur constate que, et commence à défiler autour, toute la ruse est révélé, à ce point de l'utilisateur sourire et d'apprécier de ne pas avoir été nécessaire pour décompresser un
.zip
fichier avec plein de petits pages et aller à la chasse pour laindex.html
.Solution 2
Il est possible d'intégrer une page HTML dans le code HTML. Il peut être fait à l'aide de la un peu obscure
data:
URL dans lahref
attribut. Comme un simple test, essayez de rester quelque part dans une page HTML:Dans Firefox, j'obtiens un "blah" lien hypertexte, qui permet d'accéder à une page présentant le FOO tête. (Notez que je n'ai pas entièrement formé page HTML ici, juste un extrait de code HTML, c'est juste un bonjour exemple).
L'inconvénient de cette technique est que l'ensemble de la page cible est dans l'URL, ce qui est fourré dans le navigateur l'adresse de la zone de saisie.
S'il est grand, il pourrait se heurter à certains problèmes, peut-être spécifiques à un navigateur; je n'ai pas beaucoup d'expérience avec elle.
Un autre inconvénient est que tout le HTML doit être échappées de sorte qu'il peut apparaître comme l'argument de la
href
attribut. De toute évidence, il ne peut pas contenir un simple guillemet double caractère de n'importe où.Un troisième inconvénient est que chaque lien a pour réplique l'
data:
matériel, car il n'est pas sémantiquement un lien à tous, mais un copier-coller de leur incorporation. Ce n'est pas une solution intéressante si la page-pour-être-embeddded est grande, et il ya de nombreux liens.J'ai utilisé l'astuce suivante pour le même problème. La bonne chose est qu'elle ne nécessite pas de javascript.
CSS:
HTML:
Voir un JSFiddle.
Avantage: en tant que votre url changements, vous pouvez l'utiliser pour faire un lien vers des pages. C'est quelque chose que la méthode ne vous laisse pas faire.
Espérons que cette aide!