10
votes

Comment vous référer à l'objet de document d'un de la page mère, en utilisant jQuery?</h1> </div> <div class="body-content"> <p> J'essaie d'accéder à l'objet de document d'une page qui vit dans un <iframe> à partir de la page d'accueil. En d'autres termes, j'ai une page qui a un <iframe> dedans, et je souhaite utiliser jQuery sur cette page (la page mère) pour accéder à l'objet de document de ce <iframe>. <P> Plus précisément, je suis Essayer de trouver la hauteur du document <iframe> D une fois que son contenu est rendu (surcharge) afin que je puisse alors redimensionner le <iframe> à partir de la page mère pour correspondre exactement à la hauteur du contenu <iframe> exactement. </ P> <p> Si c'est important, cette <iframe> est créée sur la page d'hôte à l'aide de JavaScript et est dans le même domaine que la page mère. J'utilise déjà ce type de code: </ p> <pré> xxx </ pré> <p> pour remplir le contenu <iframe> avec le contenu, mais je ne connais pas la syntaxe exacte pour obtenir le document <iframe> Objet. </ P> <p> Pour une raison quelconque, je trouve beaucoup de façons d'accéder à l'objet de document du parent à partir d'un <iframe> (le plus avec JavaScript simple), mais pas l'inverse. </ P> <p> Merci d'avance pour toute aide! </ P> </ P> </div>  <div class="d-flex mt-1"> <div class=""> <a class="badge badge-info" href="/tag/javascript">javascript</a> <a class="badge badge-info" href="/tag/jquery">jquery</a> <a class="badge badge-info" href="/tag/iframe">iframe</a> <a class="badge badge-info" href="/tag/parent">parent</a> <a class="badge badge-info" href="/tag/document">document</a> </div> </div> <hr>  <div class="pl-5"> <small class="text-muted">0 commentaires</small> <div class="comments mt-3"> </div> </div> </div> <div class=""> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-5975820494937925" data-ad-slot="2186005983" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div>  <p class="mt-4 font-weight-bold">5 Réponses :</p> <hr> <div class="row mt-3"> <div class="col-lg-1 col-md-2 col-2 col-sm-2 text-center pt-1 mx-0 px-0"> <div class="badge badge-score"> 0<br> votes </div> </div> <div class="col-lg-11 col-md-10 col-10 col-sm-10"> <div class="body-content"> <p> Il existe de nombreuses façons de pouvoir accéder à iframe: <p> Par exemple, nous avons cette page HTML: P> </p><pre>frames[0] == frames['my_frame_name'] == document.getElementById('my_frame_id').contentWindow // true</pre></p> </div> <hr>  <div class="pl-5"> <small class="text-muted">1 commentaires</small> <div class="comments mt-3"> <p class="answer-comment"> Merci pour la réponse, mais le <iframe> est dans le même domaine que la page mère. </p> <hr> </div> </div> </div> </div> <hr> <div class="row mt-3"> <div class="col-lg-1 col-md-2 col-2 col-sm-2 text-center pt-1 mx-0 px-0"> <div class="badge badge-score"> 1<br> votes </div> </div> <div class="col-lg-11 col-md-10 col-10 col-sm-10"> <div class="body-content"> <pre>$('iframe').contents()[0] </pre> </div> <hr>  <div class="pl-5"> <small class="text-muted">0 commentaires</small> <div class="comments mt-3"> </div> </div> </div> </div> <hr> <div class="row mt-3"> <div class="col-lg-1 col-md-2 col-2 col-sm-2 text-center pt-1 mx-0 px-0"> <div class="badge badge-score"> 5<br> votes </div> </div> <div class="col-lg-11 col-md-10 col-10 col-sm-10"> <div class="body-content"> <p> Avez-vous attendu que l'iframe chargeait aussi? <p> Quoi qu'il en soit, le code suivant fonctionne dans la FF3.5, Chrome 3, IE6, IE7, IE8. <br> Démo hébergé: <a href="http://jsbin.com/amequ" rel="noreferrer"> http://jsbin.com/amequ </a> (modifiable via <a href = "http: // jsbin .com / amier / modifier "rel =" noreferrer "> http://jsbin.com/amequ/edit </a>) </ p> <pré> xxx </ pré> </ p> </div> <hr>  <div class="pl-5"> <small class="text-muted">0 commentaires</small> <div class="comments mt-3"> </div> </div> </div> </div> <hr> <div class="row mt-3"> <div class="col-lg-1 col-md-2 col-2 col-sm-2 text-center pt-1 mx-0 px-0"> <div class="badge badge-score"> 0<br> votes </div> </div> <div class="col-lg-11 col-md-10 col-10 col-sm-10"> <div class="body-content"> <p> Je devais le faire dans un projet récent et j'ai utilisé ceci: <pre>$("#container").append('<iframe src="http://domain.com" width="100%" border="0" frameborder="0" id="newIframe" style="border:none;overflow:hidden;"></iframe>'); $("#newIframe").load(function(){ var _this=$("this")[0]; $(this).css({ height: _this.contentWindow ? _this.contentWindow.document.body.scrollHeight + (20) : _this.contentDocument.body.scrollHeight + (20)}); }); //contentWindow.document.body is for IE //contentDocument.body is for everything else </pre></p> </div> <hr>  <div class="pl-5"> <small class="text-muted">3 commentaires</small> <div class="comments mt-3"> <p class="answer-comment"> Le + (20), si vous vous demandez, c'est parce que Safari décide de faire défiler des barres de défilement, même si le contenu d'un iframe ajuster les dimensions iFram exactement ... Le supplément 20px aide que je trouve ... </p> <hr> <p class="answer-comment"> Vous pouvez nommer tout ce que vous voulez, il s'agit simplement d'une variable temporaire de contenir l'élément DOM afin de pouvoir être accessible ultérieurement en $ (). CSS ({}) </p> <hr> <p class="answer-comment"> Si cela fonctionne sur les navigateurs WebKit? Chrome définit toujours la hauteur de l'iframe à la hauteur du document parent. J'appelle $ (Ceci) .CSS ... dans le surcharge de l'iframe. </p> <hr> </div> </div> </div> </div> <hr> <div class="row mt-3"> <div class="col-lg-1 col-md-2 col-2 col-sm-2 text-center pt-1 mx-0 px-0"> <div class="badge badge-score"> 3<br> votes </div> </div> <div class="col-lg-11 col-md-10 col-10 col-sm-10"> <div class="body-content"> <p> Si votre balise IFrame n'a aucun attribut SRC ni créé de manière dynamique avec JavaScript ou JQuery, vous pouvez utiliser ce code de code pour vous reporter au document d'Iframe et manipuler à l'aide de JQuery: <pre> $myFrameDocument.html ( '<!doctype html><html><head></head><body></body></html>' ); </pre></p> </div> <hr>  <div class="pl-5"> <small class="text-muted">0 commentaires</small> <div class="comments mt-3"> </div> </div> </div> </div> <hr> </div> <div class="col-lg-3 col-md-12 col-12 col-sm-12" > <div class="related"> <iframe src="https://rcm-eu.amazon-adsystem.com/e/cm?o=8&p=12&l=ez&f=ifr&linkID=b777da379e25dfc65f34887292b82918&t=birdy0c-21&tracking_id=birdy0c-21" width="300" height="250" scrolling="no" border="0" marginwidth="0" style="border:none;" frameborder="0">
Articles qui pourrait vous intéresser :
Impossible d'importer le module "@ angular / material"
Interaction profonde avec break and catch
Utilisation de node.js comment renommer tous les fichiers d'un dossier
Google Chrome Uncaught (promis) DOMException lors de la lecture AUDIO