Chciałbym manipulować HTML wewnątrz elementu iframe za pomocą jQuery.
Myślałem, że będę w stanie to zrobić, ustawiając kontekst funkcji jQuery jako dokument iframe, coś w stylu:
$(function(){ //document ready
$('some selector', frames['nameOfMyIframe'].document).doStuff()
});
Jednak to nie działa. Trochę inspekcji pokazuje mi, że zmienne frames['nameOfMyIframe']
są, undefined
chyba że poczekam chwilę na załadowanie iframe. Jednak gdy ładuje się element iframe, zmienne nie są dostępne (dostaję permission denied
błędy typu).
Czy ktoś wie o obejściu tego?
.contentWindow.document
niż.document
naiframe
elemencie. Zasugeruję powyższą zmianę.Odpowiedzi:
Myślę, że to, co robisz, podlega tej samej polityce pochodzenia . To powinien być powód błędów typu „odmowa uprawnień” .
źródło
Jeśli
<iframe>
jest z tej samej domeny, elementy są łatwo dostępne jakoOdniesienie
źródło
same origin policy
, w którym to przypadku nie jest dla niego rozwiązaniem.Możesz użyć
.contents()
metody jQuery.źródło
Jeśli element iframe src pochodzi z innej domeny, nadal możesz to zrobić. Musisz przeczytać zewnętrzną stronę w PHP i powtórzyć ją ze swojej domeny. Lubię to:
iframe_page.php
Następnie coś takiego:
display_page.html
Powyższy przykład jest przykładem edycji strony zewnętrznej za pomocą elementu iframe bez odmowy dostępu itp.
źródło
same origin policy
istnieje, a propozycja tej odpowiedzi nie jest na to odporna.Uważam, że ten sposób jest czystszy:
źródło
Posługiwać się
zamiast
źródło
Musisz dołączyć zdarzenie do modułu obsługi obciążenia iframe i wykonać tam plik js, aby upewnić się, że ramka iframe zakończyła ładowanie przed uzyskaniem do niej dostępu.
Powyższe rozwiąże problem „jeszcze nie załadowano”, ale jeśli chodzi o uprawnienia, jeśli ładujesz stronę w ramce iframe z innej domeny, nie będziesz w stanie uzyskać do niej dostępu z powodu ograniczeń bezpieczeństwa.
źródło
Za pomocą window.postMessage można wywołać funkcję między stroną a jego ramką iframe (między domenami lub nie).
Dokumentacja
page.html
iframe.html
źródło
Wolę użyć innego wariantu dostępu. Od rodzica możesz mieć dostęp do zmiennej w potomnym iframe.
$
jest również zmienną i możesz uzyskać dostęp do jej zwykłego połączeniawindow.iframe_id.$
Na przykład
window.view.$('div').hide()
- ukryj wszystkie elementy div w ramce iframe o identyfikatorze „view”Ale to nie działa w FF. Dla lepszej kompatybilności powinieneś użyć
$('#iframe_id')[0].contentWindow.$
źródło
Czy wypróbowałeś już wersję klasyczną, czekając na zakończenie ładowania za pomocą wbudowanej funkcji gotowości jQuery?
K.
źródło
Tworzę przykładowy kod. Teraz możesz łatwo zrozumieć z innej domeny, że nie masz dostępu do treści iframe. Z tej samej domeny możemy uzyskać dostęp do treści iframe
Udostępniam ci mój kod. Uruchom ten kod, sprawdź konsolę. Drukuję obraz src na konsoli. Istnieją cztery elementy iframe, dwa elementy iframe pochodzące z tej samej domeny i pozostałe dwa elementy z innej domeny (podmiot zewnętrzny). Możesz zobaczyć dwa obrazy src ( https://www.google.com/logos/doodles/2015/googles-new-logo -5078286822539264.3-hp2x.gif
i
https://www.google.com/logos/doodles/2015/arbor-day-2015-brazil-5154560611975168-hp2x.gif ) na konsoli, a także można zobaczyć błąd dwóch uprawnień (2 Błąd: odmowa dostępu do dokumentu właściwości „
... irstChild)}, content: function (a) {return m.nodeName (a, "iframe")? a.contentDocument ...
), który pochodzi z zewnętrznego elementu iframe.
źródło
Skończyłem tutaj, szukając zawartości iframe bez jquery, więc dla każdego, kto tego szuka, jest to po prostu:
źródło
To rozwiązanie działa tak samo jak iFrame. Stworzyłem skrypt PHP, który może pobrać całą zawartość z drugiej strony, a najważniejsze jest to, że możesz łatwo zastosować niestandardowe jQuery do tej zawartości zewnętrznej. Zapoznaj się z poniższym skryptem, który może pobrać całą zawartość z innej witryny, a następnie możesz zastosować również swój jusquery / JS. Tej zawartości można używać w dowolnym miejscu, w dowolnym elemencie lub na dowolnej stronie.
źródło
Dla jeszcze większej niezawodności:
i
źródło