Jak uzyskać dostęp do zawartości iframe za pomocą jQuery?

116

Jak mogę uzyskać dostęp do zawartości iframe za pomocą jQuery? Próbowałem to zrobić, ale to nie zadziałało:

zawartość iframe: <div id="myContent"></div>

jQuery: $("#myiframe").find("#myContent")

Jak mogę uzyskać dostęp myContent?

Podobnie jak w jquery / javascript: dostęp do zawartości elementu iframe, ale zaakceptowana odpowiedź nie jest tym, czego szukałem.

jquery iframe mbillard
źródło
Właśnie odkryłem, że wbudowana zmienna $ w konsoli Firefoksa wcale nie wygląda na kompletne jQuery. (Pomyślałem o tym po tym, jak zdałem sobie sprawę, że nie mam również zmiennej jQuery, a następnie zorientowałem się, że nie załadowałem kodu źródłowego jQuery).
ghEEz węgorza

Odpowiedzi:

214

Musisz użyć contents()metody:

$("#myiframe").contents().find("#myContent")

Źródło: http://simple.procoding.net/2008/03/21/how-to-access-iframe-in-jquery/

Dokumentacja API: https://api.jquery.com/contents/

mbillard
źródło
3
daj mi błąd: Błąd: Odmowa dostępu do właściwości „ownerDocument”
Imran Khan
26
ime: Prawdopodobnie powoduje to błąd z następujących powodów: 1) iframe nie należy do tej samej domeny. 2) Próbujesz odczytać go przed zdarzeniem ładowania elementu iframe.
iMatoria,
1
Czy istnieje sposób sprawdzenia, czy zawartość iframe pochodzi z tej samej domeny, zanim spróbujesz uzyskać do niej dostęp i pojawi się błąd?
Kamafeather
2
Źródłowy adres URL jest uszkodzony.
karthzDIGI
1
@jperezmartin: Będziesz musiał użyć jakiejś biblioteki javascript, która będzie przenosić informacje między stroną główną a iframe. Zasadniczo została odrzucona przez przeglądarkę ze względu na funkcjonalność Cross Browser. Przepraszam, nie znam żadnej takiej biblioteki, ponieważ nigdy jej nie potrzebowałem.
iMatoria
21 
<html>
<head>
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
<script type="text/javascript">

$(function() {

    //here you have the control over the body of the iframe document
    var iBody = $("#iView").contents().find("body");

    //here you have the control over any element (#myContent)
    var myContent = iBody.find("#myContent");

});

</script>
</head>
<body>
  <iframe src="mifile.html" id="iView" style="width:200px;height:70px;border:dotted 1px red" frameborder="0"></iframe>
</body>
</html>
andres descalzo
źródło
15

Jeśli źródłem iframe jest domena zewnętrzna, przeglądarki ukryją zawartość iframe (te same zasady pochodzenia). Obejściem problemu jest zapisanie zewnętrznej zawartości w pliku, na przykład (w PHP):

<?php
    $contents = file_get_contents($external_url);
    $res = file_put_contents($filename, $contents);
?>

następnie pobierz nową zawartość pliku (string) i sparsuj ją do html, na przykład (w jquery):

$.get(file_url, function(string){
    var html = $.parseHTML(string);
    var contents = $(html).contents();
},'html');
fireb86
źródło