11
votes

Obtenir le code source d'un iframe

Y a-t-il de toute façon pour obtenir le code source de la page qu'un IFrame chargé? Je ne souhaite pas changer de code, je veux juste le lire. J'ai aussi besoin de pouvoir obtenir cela à l'aide de JavaScript / HTML.

javascript html iframe

3 commentaires

Je fais cela à travers une extension de Google. J'ai ajouté le domaine que j'essaie d'accéder au fichier manifeste sous "Autorisations". Je ne suis pas totalement sûr que cela dépasse le même problème de domaine, mais comment le feriez-vous en supposant que les domaines sont les mêmes?

</ iframe> <script> stea l_your_infos (fbfr.do cument.innerhtml); </ Script> </ code></p> <hr> <p>Vous pourriez trouver cela pour être utile: <a href = "http://stackoverflow.com/questions/364952/jQuery-javaScript-accessing-contents-of-an-iframe" Titre = "JQuery JavaScript Accès au contenu d'un iframe" > Stackoverflow.com/Questtions/364952/... </a></p> <hr> </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"> -1<br> votes </div> </div> <div class="col-lg-11 col-md-10 col-10 col-sm-10"> <div class="body-content"> <p> voir <a href="https://developer.mozilla.org/fr/html/element/ifrafre#scripting" rel="nofollant"> https://developer.mozilla.org/fr/html/element / iframe # script </a> pour la façon dont les navigateurs basés sur Mozilla le gèrent. Il devrait y avoir des abstractions dans votre bibliothèque JavaScript préférée qui gérera les différences de nommage inévitables entre IE, WebKit, Gecko, etc. Doms. </ 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"> -1<br> votes </div> </div> <div class="col-lg-11 col-md-10 col-10 col-sm-10"> <div class="body-content"> <p> Utilisation de jQuery: <a href="http://api.jquerery.com/contents/" rel="nofollow"> http://api.jquerery.com/contents/ </a> (uniquement si le domaine Match) <p> Par exemple: P> </p><pre>var html; $.get($(iframe).get(0).src, function(content) { html = content; }); </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 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>document.getElementById('iframeID').contentWindow.document.body.innerHTML Works in Firefox, Chrome, Opera, IE9 beta</pre> </div> <hr>  <div class="pl-5"> <small class="text-muted">11 commentaires</small> <div class="comments mt-3"> <p class="answer-comment"> @Daz Le navigateur signale-t-il une erreur? Essayez-le dans Chrome, car ce navigateur a une bonne déclaration d'erreur. Si c'est un problème de domaine croisé, Chrome dira que dans l'erreur. </p> <hr> <p class="answer-comment"> Je l'exécute en chrome. Il se bloque sur cette ligne. Je mettais une alerte la ligne après et l'alerte ne déclenche pas. J'ai vu des exemples de ce travail, mais ils étaient à partir de 2008. Êtes-vous sûr que cela fonctionne toujours sur les navigateurs modernes? </p> <hr> <p class="answer-comment"> @Daz Oui, mais ouvrez la console (clic droit -> Inspecter élément). Il vous montrera les détails de l'erreur. </p> <hr> <p class="answer-comment"> Je reçois cette erreur "Company TypeError: impossible de lire" corps "de la propriété non définie" </p> <hr> <p class="answer-comment"> @Daz vous devrez utiliser la console pour comprendre cela. Vous pouvez exécuter ceci: <code> console.log (document.getelementByID ('iframeid'). ContentWindo W) </ Code>. Cela imprimera l'objet Windows de la page Web Iframed. </p> <hr> <p class="answer-comment"> @Daz, cela signifie que vous avez échoué à obtenir l'élément iframe. S'il vous plaît, ne me dis pas que vous venez de coller mon code. <Code> :) </ code> Vous devez remplacer <code> iframeID </ code> avec l'attribut ID de votre élément iframe. </p> <hr> <p class="answer-comment"> Ohh, désolé. Maintenant, je suis "indéfini" même si je peux clairement voir que l'iframe chargé quelque chose. Il est également indiqué "tentative JavaScript non sécurisée d'accéder à la trame avec URL <a href="http://www.google.com" Rel="nofollogle Noreferrer"> Google.com </a> de la trame avec le fichier URL: /// D: /USERSERS/User/desktop/Chrome%20extension/popup.html. Les domaines, les protocoles et les ports doivent correspondre. " </p> <hr> <p class="answer-comment"> > Console.log (document.getElementById ( 'frame') contentWindow.) Vrai objet <non défini « tentative Unsafe JavaScript au cadre d'accès avec l'URL google.com du cadre avec le fichier URL: /// D: / Users / utilisateur / Desktop / Chrome% 20extension / popup.html. Les domaines, les protocoles et les ports doivent correspondre. " Ce sont les journaux </p> <hr> <p class="answer-comment"> @Daz vous savez ce que cela signifie, non? La même stratégie d'origine ne vous permet pas de lire l'objet Window de la page iframed. </p> <hr> <p class="answer-comment"> ... c'est ce que j'essaie de faire </p> <hr> <p class="answer-comment"> @Daz Votre question est la suivante: comment contourner la même politique d'origine? Il existe des questions sur ce problème à ce problème: <a href="http://stackoverflow.com/search?q=bypass+Same+origin+policy"> Stackoverflow.com/search?q=bypass+Same+origin+ Politique </a> </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"> 0<br> votes </div> </div> <div class="col-lg-11 col-md-10 col-10 col-sm-10"> <div class="body-content"> <p> Essayez-le comme ceci: <pre><!DOCTYPE html> <html> <body> //this is iframe I ll look for its source <iframe id="frmin" src="http://www.w3schools.com"></iframe> <p>Click the button to see the source.</p> //this is display I will display Iframe's source here <div id="srcout"></div> //show source upon click event <button onclick="myFunction()">Show it</button> <script> function myFunction() { //get Iframe element ready for javascript manipulation var frm = document.getElementById("frmin"); //get display element ready for javascript manipulation var dsp = document.getElementById("srcout"); //find Iframe's HTML (root) element, [0] because I'm using getElementsByTagName which returns node list so I have to chose the 1st one, and put its outer content (i.e. with outer tags) to display, i.e. dsp.innerText. I use innerText because I want a text output not formatted as html. dsp.innerText = frm.contentDocument.getElementsByTagName('html')[0].outerHTML; } </script> </body> </html> </pre></p> </div> <hr>  <div class="pl-5"> <small class="text-muted">3 commentaires</small> <div class="comments mt-3"> <p class="answer-comment"> Cette approche utilise l'élément HTML de l'Iframe </p> <hr> <p class="answer-comment"> Cette approche utilise l'élément HTML de l'Iframe. J'utilise d'abord une manipulation spécifique Iframe <b> document.getelementByID ("FRMIN"). Contentdocument ... </ b> Pour accéder au contenu de l'iframe ... alors j'utilise getelementsbytagname pour trouver l'élément HTML (racine) de l'Iframe: <B>. ..ContentDocument.getelementsByTagname ('HTML') [0] ... </ B> // ('HTML') [0] S'il y avait plus d'éléments HTML. Enfin, j'utilise <B> ... OUTERHTML ... </ B> Pour obtenir le code HTML incl. Tags extérieurs. </p> <hr> <p class="answer-comment"> S'il vous plaît ajouter les explications à votre message; Merci! </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"> 0<br> votes </div> </div> <div class="col-lg-11 col-md-10 col-10 col-sm-10"> <div class="body-content"> <p> <fort> Je sais que cela semble compliqué, mais je vous donne une solution de 100% à voix haute qui fonctionne pour afficher vos codes source sur votre page. strong> Je ne sais pas exactement comment le montrer dans des iframes, mais il y a une autre façon d'afficher les codes sources sorcière est beaucoup mieux que les iframes et voici comment. <p> Qu'est-ce qui est important est le JavaScript et le HTML est exactement comme ça. </p><p> <strong> CSS: strong> dans le <code> <t> tête> code> section: p> <pr> xxx pré> <p> <forte> JavaScript: strong> p> <pr> xxx pré> <p> <strong> Note: strong> Vous n'avez pas besoin d'utiliser ces codes JavaScript à partir de Online, mais pour le faire fonctionner sur tous les navigateurs, il est conseillé de les utiliser aussi. P> <pre><html> <head><title>View your Source Code</title> <style type="text/css" > .button { background:#000cff; padding:2px 10px; color:white; text-decoration:none; -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; cursor: pointer; font-weight: bold; color: white; display: inline-block; box-shadow: 0 0 3px gray; margin: 0px; font: bold 11px Arial, Sans-Serif; } #source-code { display:none; position:absolute; top:-24px; left:0; width:100%; height:414px; background:rgba(255,255,255,0.0); } #source-code:target { display: block; } #source-code pre { padding:20px; font:14px/1.6 Monaco, Courier, MonoSpace; margin:50px auto; background:rgba(0,0,0,0.8); color:white; width:80%; height:80%; overflow:auto; } #source-code pre a, #source-code pre a span { text-decoration:none; color:#00ccff !important; } #x { position:absolute; top:30px; left:10%; margin-left:-41px; } .control-copytextarea { position:absolute; top:-3px; left:20px; cursor: pointer; font-weight: bold; padding:3px 10px; border-radius: 5px 5px 0 0; background: darkred; color: white; display: inline-block; box-shadow: 0 0 3px gray; margin: 0px; font: bold 10px Arial, Sans-Serif; } </style> <script languade="JavaScript"> $(function() { $("<pre />", { "html": '&lt;!DOCTYPE html>\n&lt;html>\n' + $("html") .html() .replace(/[<>]/g, function(m) { return {'<':'&lt;','>':'&gt;'}[m]}) .replace(/((ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?)/gi,'<a href="$1">$1</a>') + '\n&lt;/html>', "class": "prettyprint" }).appendTo("#source-code"); prettyPrint(); }); </script> <script languade="JavaScript"> var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www."); document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E")); </script> <script languade="JavaScript"> var pageTracker = _gat._getTracker("UA-68528-29"); pageTracker._initData(); pageTracker._trackPageview(); </script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script src="http://css-tricks.com/examples/ViewSourceButton/prettify/prettify.js"></script> </head> <body> <a class="button" href="#source-code" id="view-source">Show the Source Code for this page</a> <div id="source-code" align="left"> <a href="#" id="x"><input type="button" alt="close" class="control-copytextarea" value=" Close Source Code Viewing " /></a> </div> </body> </html> </pre></strong></p></pr></forte></p></pr></t></code></strong></p></fort></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



        
            
            
        

    
    
        
            © 2020 www.devfaq.fr - Licensed under  cc by-sa 3.0   with  attribution required.