javascript - Hämta element från inom en iFrame

Hur får du en <div> från inom en <iframe>?

Svar #1

var iframe = document.getElementById('iframeId');
var innerDoc = (iframe.contentDocument) ? iframe.contentDocument : iframe.contentWindow.document;

Du skulle kunna skriva mer enkelt:

var iframe = document.getElementById('iframeId');
var innerDoc = iframe.contentDocument || iframe.contentWindow.document;

och den första giltiga interna dokumentet kommer att returneras.

När du väl får den inre dokumentet kan du bara komma åt dess interna delar på samma sätt som du skulle komma åt vilket element som helst på din nuvarande sida. (innerDoc.getElementById...osv.)

VIKTIGT: Se till att iframe är på samma domän, annars kan du inte få tillgång till dess interna delar. Det skulle vara cross-site scripting. Referens:

  • MDN: <iframe> Skriptning
  • MDN: Same-Origin Policy: Åtkomst till skript-API från olika ursprung

Svar #2

Glöm inte att komma åt iframe efter att den har laddats. Gammalt men pålitligt sätt utan jQuery:

<iframe src="samedomain.com/page.htm" id="iframe" onload="access()"></iframe>

<script>
function access() {
   var iframe = document.getElementById("iframe");
   var innerDoc = iframe.contentDocument || iframe.contentWindow.document;
   console.log(innerDoc.body);
}
</script>

Svar #3

Ovanstående svar gav bra lösningar med JavaScript. Här är en enkel jQuery-lösning:

$('#iframeId').contents().find('div')

Tricket här är jQuerys .contents()-metod, till skillnad från .children() som bara kan hämta HTML-element, kan .contents() hämta både textnoder och HTML-element. Det är därför man kan hämta dokumentinnehållet i en iframe genom att använda den.

Ytterligare läsning om jQuery .contents(): .contents()

Obs att iframe och sidan måste vara på samma domän.

Relaterade artiklar