Caler un iframe dans une page

**dhillig** · 28/12/2014, 19h20

Bonsoir à tous,
Je tente d'inclure dans une page html un iframe. La page à inclure a un body de width:100% height:800px. Impossible d'obtenir un rendu correct. Paramétrer la hauteur de la classe .iframe est impossible pour un site qui se veut responsive : ni "px", ni "%" et une hauteur "auto" forcement inappropriée.
Existe-'il un moyen d'avoir la totalité de l'iframe ? (et sans cette !!!! scrollbar

Merci pour votre aide et bonne soirée,
dh

**vandenn3** · 28/12/2014, 21h18

Salut,

Si tu tiens vraiment à utiliser une iframe, il y a probablement moyen de faire ce que tu veux en javascript.
par exemple lorsque l'iframe est chargée (événement onload), calculer la hauteur réelle du body de la page ( element.clientHeight) et définir la hauteur de l'iframe à partir de cette valeur. Mais le temps que la page charge, l'iframe sera petite et cela se vera...

Je pense que le plus efficace serait d'éviter d'utiliser une iframe... Par exemple en récupérant le contenu de la page cible avec ajax.

**dhillig** · 28/12/2014, 21h40

SLt Vandenn3,
Merci pour ta réponse, qu'entends-tu par "en récupérant le contenu de la page cible avec ajax" et comment faire ?
C'est qq chose dont dont n'ai jamais entendu parler... pas d'ajax, mais incorporer une page html via ajax :/
Sur ce dernier point, je ne suis pas novice en la matière mais carrément ignorant. Je sens que la tache va être rude

Mais il est vrai que les iframes ont mauvaise réputation, mais au cas où je n'arriverais pas avec la méthode ajax,
quels sont les js. à mettre afin que mon site 100%/800px s'adapte parfaite à la page destinataire, et sans scroball

Merci et bonne soirée !
dh

**vandenn3** · 29/12/2014, 02h49

Pour charger le contenu de la page avec ajax, jquery permet de le faire très simplement.
Imaginons que sur ta page principale tu aie un div dans lequel tu veux afficher la page, il faudrait un script de ce genre:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<script src='http://code.jquery.com/jquery-1.11.2.min.js'></script>
<script>
$(function(){
    $("div#conteneur").load("mapage.html");
});
</script>

ou encore si tu veux n'afficher qu'une certaine partie de la page:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<script src='http://code.jquery.com/jquery-1.11.2.min.js'></script>
<script>
$(function(){
    $("div#conteneur").load("mapage.html div#contenu_de_la_page");
});
</script>

Avec une iframe, j'ai essayé quelque chose mais c'est moyen.. mon code fonctionne si la page à insérer est dans un seul élément, qui n'a pas de hauteur définie à 100%:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
<script>
    function change_taille() {
        var my_iframe = document.querySelector("#my_iframe");
        var hauteur_doc = my_iframe.contentDocument.querySelector("div#content").clientHeight;
        my_iframe.height = hauteur_doc;
    }
  </script>
  <iframe id='my_iframe' src='page_1.html' width="100%" onload='change_taille()'></iframe>

et page_1.html:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
<html>
    <head>
        <title>Test</title>
    </head>
    <body style='height:100%'>
        <div id='content'>
            <!-- contenu de la page dans ce div -->
            <p>Texte texte texte</p>
            <p>Texte texte texte</p>
        </div>
    </body>
</html>

La première solution me parait plus simple.

**dhillig** · 29/12/2014, 20h33

Slt vandenn3,
Par "intégrer un iframe via ajax", je ne savais pas que tu voulais dire "via Jquery" (et donc Ajax

Merci bcp pour ta réponse et tes codes. Malheureusement, ma page utilise le JQuery "ScrollTo" et tes scripts, comme ceux de FancyBox bloquent les fonctions de ScrollTo

http://www.developpez.net/forums/d14...llto-fancybox/
Vais-je devoir supprimer ScrollTo (que je trouve TOP) pour utiliser tes codes ou ceux des lightbox ?
Encore merci et bonne soirée,
dh

**vandenn3** · 29/12/2014, 21h52

C'est de cette fonctionnalité que tu parle? http://www.webdesignweb.fr/sources/scrollto/index.html (quand on clic sur les titres la page se scroll)

Car faire scroller la page en javascript pur ce ne doit pas être fort compliqué.

Caler un iframe dans une page

jQuery

Vue hybride

Discussions similaires

Partager

Partager