11480 sujets

JavaScript, DOM et API Web HTML5

Bonjour tout le monde,

Je me permets de vous écrire car j'ai une demande un peu spéciale et je m'arrache légèrement les cheveux. Je vous explique :

Au click j'importe une page HTML ( un boutique contenant différent produit qui se charge au lancement ) avec la fonction :
 $("#resultat").html('<object data=\"clubs-partenaires/rfcliege.html\">'); 

Jusque la tout va bien, cependant je souhaiterais que la div "resultat" change de height pour avoir la dimension de la page importée une fois chargée. Malheureusement je ne parviens pas a récupérer la hauteur de ma page étant donné que celle ci est importée. j'ai essayé de récupérer un élément inscrit sur la page importée mais impossible également.

Concrètement est-ce possible dans mon index.html en jquery au click de récupérer des informations ( valeur d'une div, etc ) de ma page rfcliege.html ? Si oui comment?

Dans l'attente de votre réponse,
je vous souhaite une excellente journée.

Bien à vous,
NeSo
Hello,

Je ne suis pas certain d'avoir tout compris mais j'ai du mal à voir comment on peut récupérer la hauteur d'une div si elle n'est pas affiché dans le DOM. Et pourquoi vouloir récupérer la hauteur de la page ? Dans quel but ? Pourquoi la div en question ne prendrait pas automatiquement la hauteur de la page importée ? Cela devrait se faire je pense....
Modérateur
Bonjour,

Problème à mon avis insoluble avec object, avec un iframe, il y a peut-être un truc avec window.parent pour transmettre a la fenêtre parente la hauteur de body (de la page dans iframe) pour ensuite l'appliquer a ton iframe. Enfin , il faut que ta page et que l'iframe soit sur le même domaine pour qu'il y est une chance que cela fonctione.

Peut-être devrais tu regarder du coté de AJAX pour inclure ces contenus dans un div , si javaScript et styles de cette autre page ne se télescopent pas avec ta page actuelle.

Cdt
Modifié par gcyrillus (02 Aug 2021 - 16:44)
Bonjour,

Merci de votre réponse, malheureusement a cause de l'importation la div en question ne prends pas automatiquement la hauteur de la page importée.
Probablement parce que la page prend un temps avant de se charger et la hauteur de la page varie selon le nombre d'article.. ( voici la page en question importée dans une div https://www.marksports.eu/clubs-partenaires/rfcliege.html )

J'ai tenté en jquery de mettre le height a 100% après le chargement de cette page mais cela ne fonctionne pas car la div devient toute petite..

J'aurai imagé qu'a l'importation de la page il était possible d'afficher la hauteur dans le dom pour la récupérer et l'appliquer...

Je constate que pour afficher la boutique ECWID utilise
<script data-cfasync="false" type="text/javascript" src="https://app.ecwid.com/script.js?22671038&data_platform=code" charset="utf-8"></script>
			<script type="text/javascript"> xProductBrowser("id=my-store-22671038", "defaultCategoryId=51984084", "categoriesPerRow=3","views=grid(5,3) list(60) table(60)");</script>

Est-ce peut être possible de lancer ce script au click dans la div "resultat"?

merciiiii d'avance
gcyrillus a écrit :
Bonjour,

Problème à mon avis insoluble avec object, avec un iframe, il y a peut-être un truc avec window.parent pour transmettre a la fenêtre parente la hauteur de body (de la page dans iframe) pour ensuite l'appliquer a ton iframe. Enfin , il faut que ta page et que l'iframe soit sur le même domaine pour qu'il y est une chance que cela fonctione.

Peut-être devrais tu regarder du coté de AJAX pour inclure ces contenus dans un div , si javaScript et styles de cette autre page ne se télescopent pas avec ta page actuelle.

Cdt


Bonjour Merci de ta proposition..
Je viens de tenter avec $(window.parent.document).height() mais je ne parviens pas a récupérer la hauteur.. c'est a s'arracher les cheveux xD
Je ne parviens vraiment pas a trouver une autre solution me permettant de charger cette boutique au click..
Modérateur
NeSo a écrit :


Bonjour Merci de ta proposition..
Je viens de tenter avec $(window.parent.document).height() mais je ne parviens pas a récupérer la hauteur.. c'est a s'arracher les cheveux xD
Je ne parviens vraiment pas a trouver une autre solution me permettant de charger cette boutique au click..


En fait window.parent n'a de sens qu'a partir de la page dans l'iframe.

en gros, l'idée serait d'avoir dans la page injectée dans l'iframe un script du style:

<script>
window.onload = function() {
let bH = document.documentElement.scrollHeight;
let iFr =  window.parent.document.querySelector("#iFrame");         
iFr.style.height =bH + "px"; 
}
</script>

avec un iframe(ou object) avec une id="iFrame" pour afficher cette autre page avec le script dans ton iframe ou object.

si les deux pages sont sur le même serveur/ndd , il y a des chances que cela fonctionne.

test sur free : http://gcyrillus.free.fr/parent-object/template.html

Cdt
Modifié par gcyrillus (03 Aug 2021 - 12:09)