web-dev-qa-db-fra.com

Boutons Précédent et Suivant dans un iframe

Comment "implémenter" les boutons Précédent et Suivant dans un iframe avec JS?

javascriptiframe
28
randomwebdev

Utilisez le window.history objet.

// For the current window
window.history.back();     
window.history.forward();

// For an iframe's window
iframe.contentWindow.history.back(); 
iframe.contentWindow.history.forward();

ou

iframe.contentWindow.history.go(-1); // back
iframe.contentWindow.history.go(1);  // forward

https://developer.mozilla.org/en/dom/window.history

37
Andy E

Bouton dans le cadre:

<input type="button" value="Back" onclick="history.back()">

Bouton dans le cadre parent:

<input type="button" value="Back" onclick="frame_name.history.back()">
8
Pavel Strakhov

Mise à jour pour 2017: il n'y a aucun moyen de le faire si l'origine du contenu iframe est différente de l'origine de la page englobante - sauf si vous contrôlez le contenu sur l'origine distante et pouvez le faire accepter les événements postMessage . Si l'origine est la même, les réponses plus anciennes fonctionnent toujours.

7
Adam Leggett

Merci à tous pour vos précieux conseils :-) J'ai réussi à partir de vos suggestions et à les développer un peu plus loin.

J'ai une page Web qui a deux cadres verticaux: une colonne étroite à gauche pour une barre de menus (nom du cadre = "menu") et une fenêtre principale à droite (nom du cadre = "principal"), couvrant la majeure partie de la largeur . C'est-à-dire que l'index.htm ne contient qu'un jeu de cadres sur toute la surface. Maintenant ... pour résoudre le problème général de navigation "arrière" dans mon jeu de cadres simple, j'ai réussi à utiliser la suggestion de Pavel Strakhov avec le type d'entrée = bouton - seulement je devais élaborer le chemin DOM un peu plus loin. Comme j'ai le bouton dans le cadre "menu" à gauche, et le contenu à naviguer se passe dans le cadre "principal" à droite, les deux cadres sont des frères et sœurs, plutôt qu'un parent vs un enfant. Ainsi, dans mon cas, j'ai dû traverser un niveau dans la hiérarchie, avant de pouvoir me référer au cadre frère. En conséquence, dans mon cas, l'élément de bouton lit

<input type="button" value="Back in the main frame" onclick="window.parent.main.history.back()">

ou vous pouvez faire référence au cadre par index ordinal (de base zéro) dans un tableau, plutôt que par nom:

<input type="button" value="Back in the main frame" onclick="window.parent.frames[1].history.back()">

J'ai également remarqué que toute la propriété "onclick" peut être attachée à peu près à tout autre élément visible, comme une ancre/href (A), un DIV ou un P. J'ai également essayé ceux-ci, pour faire le " le bouton "précédent" ressemble plus au reste de mon menu, mais est finalement revenu à l'aspect et au comportement "bouton" grossiers, pour rendre le bouton plus évident/proéminent/distinct. Il semble brut mais il fonctionne mieux.

En fait, dans mon cas, windows.parent Se réfère en fait au cadre supérieur - il y a donc une autre façon de se référer à mon cadre appelé "principal" et de lui dire de revenir en arrière: onclick="top.main.history.back()". Ou, apparemment, onclick="top.frames['main'].history.back()".

Et puis j'ai découvert que cela ne fonctionne toujours pas de manière fiable. Quirks découvert jusqu'à présent:

  • dans Firefox autour de la v42, si vous revenez en arrière et utilisez ensuite le bouton "avant" du navigateur, plusieurs URL supplémentaires cliquent sur la route, vous pouvez obtenir des résultats amusants: parfois la fonction history.back () dans un cadre se traduira par un historique.back () sur le cadre supérieur, sans raison apparente.

  • dans Firefox autour de la v42, parfois le propre bouton "retour" du navigateur génère history.back () par image, plutôt qu'un historique.back () par image supérieure, sans raison apparente (= comportement incohérent du "back" natif bouton)

  • indépendamment de la marque et de la version du navigateur, certains sites Web effacent apparemment l'historique de leur cadre de base lors du chargement du site. Si vous chargez un tel site dans un cadre, le history.back () par cadre ne fait rien.

C'est peut-être une autre raison (en dehors du style homogène) pourquoi presque personne n'utilise plus les bons vieux cadres HTML. Les comportements qui en résultent ne sont pas très déterministes/prévisibles/évidents pour l'utilisateur. C'est probablement pourquoi les webmasters préfèrent les colonnes fixes, implémentées par des tables ou par des moyens plus modernes. Ou peut-être que c'est simplement parce que tout le monde utilise un CMS de toute façon de nos jours.

1
frr