Javascript bir iframe vücut içeriği almak için nasıl?

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>

Ne almak istiyorum:

test<br/>

javascript html iframe

— Aman Tanrım
kaynak

52

Önemli not: Alanlar arası bir iFrame içeriğine erişemezsiniz. Bkz. Aynı Menşe politikası .

— Ocak'ta HellaMad

154

Tam soru, jQuery ile değil saf JavaScript ile nasıl yapılacağıdır.

Ama her zaman jQuery kaynak kodunda bulunan çözümü kullanın. Yerel JavaScript'in yalnızca bir satırı.

Benim için iframe içeriği almak için en iyi, kolay okunabilir ve hatta afaik .

Önce iframe'inizi alın

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

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

Ve sonra jQuery'nin çözümünü kullanın

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

Nesnenin contentWindowözelliği sırasında bu hile yapan Internet Explorer'da bile çalışır iframe. Diğer tarayıcıların çoğu contentDocumentözelliği kullanır ve bu özelliği ilk önce bu VEYA koşulunda kanıtlamamızın nedeni budur. Ayarlanmadıysa deneyin contentWindow.document.

İframe'deki öğeleri seçme

Ardından , DOM Öğesini genellikle seçmek için getElementById()veya querySelectorAll()öğesini kullanabilirsiniz iframeDocument:

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

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

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

İframe'deki çağrı işlevleri

Bazı global işlevleri, değişkenleri veya tüm kütüphaneleri (ör. ) Çağırmak için sadece windowöğeyi alın :iframejQuery

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 /*, ... */);

Not

Tüm bunlar aynı menşei politikasına uyarsanız mümkündür .

— algorhythm
kaynak

2

iframe burada tanımlanmamışsa, tam kod yazmalı veya onunla jQuery

— yazmamalısınız

13

lütfen affedersiniz, ancak kod satırı jquery kodundan bir alıntıdır ve kod bloğu kendi örnek kodumdur. Gerisi herkes kendini çıkarsın. eksik olan tek şey iframe değişkenidir. Ve iframe'inizin nerede olduğunu veya kimliğinin nasıl olduğunu bilmiyorum.

— algoritma

5

Cevabın üst kısmına iframe'in uzak src'si varsa bunun işe yaramadığına dair bir uyarı ekleyebilir misiniz? Eğer yanılıyorsam, başka bir HTTP isteği göndermeden iframe içeriğini hala nasıl alabileceğimi gösterebilirseniz çok memnun olurum (iframe içeriğini oluşturmak için çalıştırılan javascript'e ihtiyacım var ve bir önlenebilirse ikinci javascript ortamı).

— Zackline

1

Böyle bir uyarım var. Ama açıklamamın sonunda. Aynı köken politikasına uymalısınız. Bu kadar.

— 16'da algoritma

2

Yukarıdakilerin işe yaraması için, document.querySelector('#id_description_iframe').onload = function() {... birine yardım etmesini umuyorum .

— user3442612

71

JQuery kullanarak şunu deneyin:

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

— Michael Adedayo
kaynak

27

Çalışmıyor çünkü "Etki alanları, protokoller ve bağlantı noktaları eşleşmelidir". : Güvenli olmayan JavaScript, URL ile çerçeveye

— erişmeyi deniyor

2

Belirtildiği gibi, alanlar eşleşirse işe yarar. FYI, az önce $ ("# id_description_iframe #id_of_iframe_body"). Html () 'nin Chrome'da çalıştığını, ancak tüm firefox sürümlerinde çalışmadığını ve bu nedenle yukarıdakileri kullanmanın iyi olduğunu gördüm. Ie $ ("# id_description_iframe #id_of_iframe_body"). Content (). Find ("body"). Html () her ikisinde de işe

— yaradı

41

benim için mükemmel çalışıyor:

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

— bizzr3
kaynak

3

Bu garip, ama benim için .bodyçalışmıyor. Ancak .getElementsByTagName('body')[0]öyle.

— Jenny O'Reilly

".body" değil, sadece "body". noktayı kaldır

— Arjun

1

vanilya javascript için iseniz bu cevap olmalıdır.

— Jovanni G

23

AFAIK, bir Iframe bu şekilde kullanılamaz. Src özelliğini başka bir sayfaya yönlendirmeniz gerekir.

Uçak eski javascript kullanarak vücut içeriğini nasıl elde edeceğiniz aşağıda açıklanmıştır. Bu hem IE hem de Firefox ile çalışır.

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
kaynak

1

safari yapar (yani şube)

— Andrei Cristian Prodan

alanlar arası bir sorunla karşılaşırsa, " someOther.com " kaynağına sahip bir karenin çapraz menşe çerçeveye erişmesini engelledi .

— 18:36

10

contentJS ile iframe içinde kullanın :

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

— CoursesWeb
kaynak

5

Ben etiketler arasına metin yerleştirme iframe yani işleyemez tarayıcılar için ayrılmıştır düşünüyorum ..

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

İframes html kaynağını ayarlamak için 'src' özniteliğini kullanırsınız ...

Umarım yardımcı olur :)

3

Aşağıdaki kod tarayıcılar arası uyumludur. IE7, IE8, Fx 3, Safari ve Chrome'da çalışır, bu nedenle tarayıcılar arası sorunları ele almaya gerek yoktur. IE6'da test yapmadı.

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

Aşağıdaki html benim için Mac'teki Chrome 7'de çalıştı. Bu orijinal yayını Windows'ta Chrome 6'da test ettim ve iyi çalıştı. <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> test </h1>"; } </script> </body> </html>

— nekno

1

window.frames.iframeId.documentbenim için tanımsız. (Ubuntu 13.04, Chrome)

— Ionică Bizău

2

Chalkey doğruysa, iframe içinde bulunacak sayfayı belirtmek için src özelliğini kullanmanız gerekir. Bunu yapmanız ve iframe'deki belgenin üst belgeyle aynı etki alanında olması koşuluyla, bunu kullanabilirsiniz:

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

Açıkçası, onları bir uyarı yapmak yerine içeriklerle yararlı bir şey yapabilirsiniz.

— Graham Clark
kaynak

1

Javascript vücut içeriği almak için, ben aşağıdaki kodu denedim:

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

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

burada "id_description_iframe" iframe kimliğinizdir. Bu kod benim için iyi çalışıyor.

— sunakshi
kaynak

2

Lütfen yanıtınızı yalnızca kodu yapıştırmak yerine her zaman bağlama yerleştirin. Daha fazla ayrıntı için buraya bakın.

— gehbiszumeis

1

Yalnızca kod yanıtları düşük kalite olarak kabul edilir: kodunuzun ne yaptığını ve sorunu nasıl çözdüğünü açıkladığınızdan emin olun. Gönderinize daha fazla bilgi ekleyebilmeniz hem askerlere hem de gelecekteki okuyuculara yardımcı olacaktır. Ayrıca bkz. Tamamen kod tabanlı cevapları açıklama: meta.stackexchange.com/questions/114762/…

— borchvm