Ottenere il codice sorgente di un iframe

Esiste comunque il codice sorgente della pagina caricato da un iframe? Non desidero cambiare il codice, voglio solo leggerlo. Devo anche essere in grado di ottenere questo usando javascript/html.Ottenere il codice sorgente di un iframe

fonte

2011-01-19 Franz Payer

fare la partita domini? –

Sto facendo questo attraverso un'estensione di google. Ho aggiunto il dominio che sto cercando di accedere al file manifest sotto "autorizzazioni". Non sono del tutto sicuro che tutto questo superi lo stesso problema del dominio, ma come faresti se i domini siano gli stessi? –

'' – drudge

document.getElementById('iframeID').contentWindow.document.body.innerHTML

Lavori in Firefox, Chrome, Opera, IE9 beta

fonte

2011-01-19 01:39:42

lo ha già provato, non funziona –

@Daz Il browser segnala un errore? Provalo in Chrome, dal momento che il browser ha una buona segnalazione degli errori. Se si tratta di un problema interdominio, Chrome lo dirà nell'errore –

Lo sto eseguendo tramite Chrome. Si blocca su quella linea.Metto un avviso la linea dopo e l'avviso non si innesca.Ho visto esempi di questo lavoro ma erano del 2008. Sei sicuro che funzioni ancora sui browser moderni? –

-1

Vedere https://developer.mozilla.org/en/HTML/Element/iframe#Scripting per come i browser basati su Mozilla lo gestiscono. Ci dovrebbero essere astrazioni nella tua libreria JavaScript preferita che gestirà le inevitabili differenze di denominazione tra IE, WebKit, Gecko, ecc. DOM.

fonte

2011-01-19 01:31:44 wmorrell

-1

utilizzando jQuery: http://api.jquery.com/contents/ (solo se corrispondenza dominio)

Ad esempio:

$(iframe).contents().find('body').html();

Se non corrisponde, è possibile caricare di nuovo (come può essere conservato già nel client non può andare al server di nuovo):

var html; 
$.get($(iframe).get(0).src, function(content) { 
    html = content; 
});

fonte

2011-01-19 01:35:58 lepe

L'OP che utilizza jQuery? –

Prova in questo modo:

<!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>

fonte

2015-10-20 21:11:58 Lumic

Spiega il tuo codice! – aschipfl

Questo approccio utilizza l'elemento HTML di Iframe – Lumic

Questo approccio utilizza l'elemento HTML di Iframe. Per prima cosa utilizzo la manipolazione specifica di Iframe ** document.getElementById ("frmin"). ContentDocument ... ** per accedere al contenuto di Iframe ... quindi utilizzo getElementsByTagName per trovare l'elemento HTML (root) di Iframe: ** ... contentDocument. getElementsByTagName ('html') [0] ... ** // ('html') [0] se c'erano più elementi HTML. Infine, uso ** ... outerHTML ... ** per ottenere il codice HTML incl. tag esterni. – Lumic

So che sembra complicato, ma io vi do un modo a prova di proiettile al 100% che lavora per visualizzare i codici sorgente sulla tua pagina. Non so esattamente come visualizzarlo negli iframe, ma c'è un altro modo di vedere i codici sorgente che è molto meglio degli iframe e questo è il modo.

Ciò che è importante è il codice JavaScript e l'HTML è esattamente come questo.

CSS: Nella sezione <head></head>:

<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>

JavaScript:

<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>

NOTA: Non è necessario utilizzare questi codici JavaScript da online, ma per per far sì che funzioni su tutti i browser, si consiglia di usarli anche tu.

<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>

HTML: Nella sezione <body></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>

NOTA: direttamente È possibile copiare e incollare i codici alla tua pagina web, funzionerà esattamente come è.

esempio completo:

<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>

fonte

2017-03-01 18:30:20 SeekLoad

Ottenere il codice sorgente di un iframe

risposta

Problemi correlati