Jak pobrać treść elementu iframe w JavaScript?

154

<iframe id="id_description_iframe" class="rte-zone" height="200" frameborder="0" title="description">
  <html>
    <head></head>
    <body class="frameBody">
      test<br/>
    </body>
  </html>
</iframe>

Chcę uzyskać:

test<br/>

javascript html iframe o mój Boże
źródło

52

Ważna uwaga: nie możesz uzyskać dostępu do zawartości iFrame, jeśli jest ona międzydomenowa. Zobacz zasady dotyczące tego samego pochodzenia .

HellaMad

154

Dokładne pytanie brzmi: jak to zrobić za pomocą czystego JavaScript, a nie jQuery.

Ale zawsze korzystam z rozwiązania, które można znaleźć w kodzie źródłowym jQuery. To tylko jedna linia natywnego JavaScript.

Dla mnie jest to najlepszy, łatwo czytelne i nawet AFAIK najkrótsza droga do uzyskania zawartości iframe.

Najpierw zdobądź swój iframe

var iframe = document.getElementById('id_description_iframe');

// or
var iframe = document.querySelector('#id_description_iframe');

A następnie użyj rozwiązania jQuery

var iframeDocument = iframe.contentDocument || iframe.contentWindow.document;

Działa nawet w przeglądarce Internet Explorer, która robi tę sztuczkę podczas contentWindowwłasności iframeobiektu. Większość innych przeglądarek korzysta z tej contentDocumentwłaściwości i jest to powód, dla którego najpierw sprawdzamy tę właściwość w tym warunku LUB. Jeśli nie jest ustawione, spróbuj contentWindow.document.

Wybierz elementy w elemencie iframe

Następnie możesz zwykle użyć getElementById()lub nawet querySelectorAll()wybrać element DOM z iframeDocument:

if (!iframeDocument) {
    throw "iframe couldn't be found in DOM.";
}

var iframeContent = iframeDocument.getElementById('frameBody');

// or
var iframeContent = iframeDocument.querySelectorAll('#frameBody');

Funkcje wywołań w ramce iframe

Pobierz tylko windowelement from, iframeaby wywołać niektóre funkcje globalne, zmienne lub całe biblioteki (np. jQuery):

var iframeWindow = iframe.contentWindow;

// you can even call jQuery or other frameworks
// if it is loaded inside the iframe
iframeContent = iframeWindow.jQuery('#frameBody');

// or
iframeContent = iframeWindow.$('#frameBody');

// or even use any other global variable
iframeWindow.myVar = window.myVar;

// or call a global function
var myVar = iframeWindow.myFunction(param1 /*, ... */);

Uwaga

Wszystko to jest możliwe, jeśli przestrzegasz zasady tego samego pochodzenia .

algorytm
źródło

2

iframe jest tutaj niezdefiniowane, albo powinieneś napisać pełny kod, albo nie powinieneś pisać z nim jQuery

Tarun Gupta

13

przepraszam, ale wiersz kodu to fragment kodu jquery, a blok kodu to mój własny przykładowy kod. Reszta powinna się wydostać. jedyne, czego Ci brakuje, to zmienna iframe. I nie mogę wiedzieć, gdzie jest twój iframe ani jaki jest jego identyfikator.

algorytm

5

Czy mógłbyś dodać ostrzeżenie na początku odpowiedzi, że to nie działa, jeśli iframe ma zdalny src? Jeśli się mylę, byłbym wdzięczny, gdybyś mógł wskazać mi, w jaki sposób mogę nadal uzyskać zawartość iframe bez wysyłania kolejnego żądania HTTP (niemożliwe, ponieważ potrzebuję JavaScript do skonstruowania zawartości iframe i nie chcę wdrażać drugie środowisko javascript, jeśli można tego uniknąć).

Zackline

1

Mam takie ostrzeżenie. Ale na końcu mojego wyjaśnienia. Musisz przestrzegać polityki tego samego pochodzenia. To wszystko.

algorhythm

2

Aby powyższe zadziałało, musiałem załączyć to w document.querySelector('#id_description_iframe').onload = function() {... Hope to pomaga komuś.

user3442612

71

Używając JQuery, spróbuj tego:

$("#id_description_iframe").contents().find("body").html()

Michael Adedayo
źródło

27

To nie działa, ponieważ „Domeny, protokoły i porty muszą być zgodne”. : Niebezpieczna próba uzyskania dostępu do ramki z adresem URL za pomocą kodu JavaScript

Ionică Bizău

2

Jak wspomniano, zadziałałoby, gdyby domeny były zgodne. Do Twojej wiadomości, właśnie odkryłem, że $ ("# id_description_iframe #id_of_iframe_body"). Html () działa w Chrome, ale nie we wszystkich wersjach Firefoksa, więc używanie powyższego jest w porządku. Tj. $ ("# Id_description_iframe #id_of_iframe_body"). Content (). Find ("body"). Html () działał w obu

hobailey

41

u mnie działa idealnie:

document.getElementById('iframe_id').contentWindow.document.body.innerHTML;

bizzr3
źródło

3

To dziwne, ale u mnie .bodynie działa. Jednak .getElementsByTagName('body')[0]tak.

Jenny O'Reilly,

to nie jest „.body”, tylko „ciało”. usuń kropkę

Arjun

1

to powinna być odpowiedź, jeśli jesteś w zwykłym javascript.

Jovanni G,

23

AFAIK, iframe nie może być używane w ten sposób. Musisz wskazać jego atrybut src na inną stronę.

Oto jak uzyskać zawartość treści za pomocą starego javascript. Działa to zarówno z IE, jak i Firefox.

function getFrameContents(){
   var iFrame =  document.getElementById('id_description_iframe');
   var iFrameBody;
   if ( iFrame.contentDocument ) 
   { // FF
     iFrameBody = iFrame.contentDocument.getElementsByTagName('body')[0];
   }
   else if ( iFrame.contentWindow ) 
   { // IE
     iFrameBody = iFrame.contentWindow.document.getElementsByTagName('body')[0];
   }
    alert(iFrameBody.innerHTML);
 }

Jose Basilio
źródło

1

robi na safari (tj. oddział)

Andrei Cristian Prodan

w przypadku problemu między domenami zablokowano ramce o źródle „ someOther.com ” dostęp do ramki pochodzącej z innych źródeł.

lannyf

10

użyj contentw iframe z JS:

document.getElementById('id_iframe').contentWindow.document.write('content');

Kursy Web
źródło

5

Myślę, że umieszczanie tekstu między tagami jest zarezerwowane dla przeglądarek, które nie obsługują ramek iframe, tj.

<iframe src ="html_intro.asp" width="100%" height="300">
  <p>Your browser does not support iframes.</p>
</iframe>

Używasz atrybutu „src”, aby ustawić źródło elementów iframe html ...

Mam nadzieję, że to pomoże :)

źródło

3

Poniższy kod jest zgodny z różnymi przeglądarkami. Działa w IE7, IE8, Fx 3, Safari i Chrome, więc nie ma potrzeby rozwiązywania problemów z różnymi przeglądarkami. Nie testowałem w IE6.

<iframe id="iframeId" name="iframeId">...</iframe>

<script type="text/javascript">
    var iframeDoc;
    if (window.frames && window.frames.iframeId &&
        (iframeDoc = window.frames.iframeId.document)) {
        var iframeBody = iframeDoc.body;
        var ifromContent = iframeBody.innerHTML;
    }
</script>

nekno
źródło

Poniższy HTML działał dla mnie w Chrome 7 na Macu. Przetestowałem ten oryginalny post w Chrome 6 na Windows i działał dobrze. <html> <head> </head> <body> <iframe id = "iframeId" name = "iframeId"> ... </iframe> <script type = "text / javascript"> var iframeDoc; if (window.frames && window.frames.iframeId && window.frames.iframeId.document) {window.frames.iframeId.document.body.innerHTML = "<h1> testowanie </h1>"; } </script> </body> </html>

nekno

1

window.frames.iframeId.documentjest dla mnie nieokreślona. (Ubuntu 13.04, Chrome)

Ionică Bizău

2

Chalkey jest poprawny, musisz użyć atrybutu src, aby określić stronę, która ma być zawarta w ramce iframe. Jeśli to zrobisz, a dokument w ramce iframe znajduje się w tej samej domenie co dokument nadrzędny, możesz użyć tego:

var e = document.getElementById("id_description_iframe");
if(e != null) {
   alert(e.contentWindow.document.body.innerHTML);
}

Oczywiście możesz wtedy zrobić coś pożytecznego z zawartością, zamiast po prostu umieszczać ją w ostrzeżeniu.

Graham Clark
źródło

1

Aby pobrać treść z javascript, wypróbowałem następujący kod:

var frameObj = document.getElementById('id_description_iframe');

var frameContent = frameObj.contentWindow.document.body.innerHTML;

gdzie „id_description_iframe” to identyfikator elementu iframe. Ten kod działa dobrze dla mnie.

sunakshi
źródło

2

Zawsze umieszczaj odpowiedź w kontekście, a nie tylko wklejaj kod. Więcej informacji znajdziesz tutaj .

gehbiszumeis

1

Odpowiedzi zawierające tylko kod są uważane za niskiej jakości: pamiętaj, aby wyjaśnić, co robi Twój kod i jak rozwiązuje problem. Pomoże to pytającemu i przyszłym czytelnikom, jeśli możesz dodać więcej informacji w swoim poście. Zobacz także Wyjaśnianie odpowiedzi opartych na kodzie: meta.stackexchange.com/questions/114762/…

borchvm

Jak pobrać treść elementu iframe w JavaScript?

Odpowiedzi: