Zasadniczo mam iframe
osadzoną na stronie i iframe
ma kilka procedur JavaScript, które muszę wywołać ze strony nadrzędnej.
Teraz przeciwieństwo jest dość proste, wystarczy tylko zadzwonić parent.functionName()
, ale niestety potrzebuję dokładnie tego przeciwnie.
Należy pamiętać, że mój problem nie zmienia źródłowy adres URL z następujących iframe
, ale wywoływanie funkcji zdefiniowanej w iframe
.
javascript
html
iframe
Tamas Czinege
źródło
źródło
Odpowiedzi:
Załóżmy, że identyfikator iFrame to „targetFrame”, a funkcja, którą chcesz wywołać, to
targetFunction()
:Możesz również uzyskać dostęp do ramki za pomocą
window.frames
zamiastdocument.getElementById
.źródło
document.getElementById('remote_iframe_0').contentWindow.my.create_element_gadget('verify_user');"
remote_iframe_0 jest tworzony programowo przez serwer Apache Shindig, alewindow.parent.document.getElementById('remote_iframe_0').contentWindow.my.create_element_gadget('verify_user');"
działaJest kilka dziwactw, o których należy pamiętać.
HTMLIFrameElement.contentWindow
jest prawdopodobnie łatwiejszym sposobem, ale nie jest to dość standardowa właściwość, a niektóre przeglądarki go nie obsługują, głównie starsze. Jest tak, ponieważ standard HTML poziomu 1 DOM nie ma nic do powiedzenia na tematwindow
obiektu.Możesz także spróbować
HTMLIFrameElement.contentDocument.defaultView
, na co zezwala kilka starszych przeglądarek, ale IE tego nie robi. Mimo to standard nie mówi wprost, że odzyskujeszwindow
obiekt z tego samego powodu, co (1), ale możesz wybrać tutaj kilka dodatkowych wersji przeglądarki.window.frames['name']
powrót okna jest najstarszym, a zatem najbardziej niezawodnym interfejsem. Ale musisz użyćname="..."
atrybutu, aby uzyskać ramkę według nazwy, która jest nieco brzydka /przestarzała/ przejściowa. (id="..."
byłoby lepiej, ale IE tego nie lubi).window.frames[number]
jest również bardzo niezawodny, ale znajomość właściwego indeksu to sztuczka. Możesz uciec od tego np. jeśli wiesz, że na stronie jest tylko jeden element iframe.Jest całkiem możliwe, że iframe potomne jeszcze się nie załadowało lub coś innego poszło nie tak, że stało się niedostępne. Łatwiejsze może być odwrócenie przepływu komunikacji: to znaczy, że iframe potomne powiadomi swój
window.parent
skrypt, gdy zakończy ładowanie i będzie gotowe do oddzwonienia. Przekazując jeden ze swoich obiektów (np. Funkcję wywołania zwrotnego) do skryptu nadrzędnego, ten rodzic może następnie komunikować się bezpośrednio ze skryptem w ramce iframe, nie martwiąc się o to, z jakim elementem HTMLIFrameElement jest skojarzony.źródło
methode()
część.Wywołanie nadrzędnej funkcji JS z
iframe
jest możliwe, ale tylko wtedy, gdy zarówno rodzic, jak i strona załadowana doiframe
są z tej samej domeny, tj. Abc.com, i oba używają tego samego protokołu, tzn. Oba są włączonehttp://
lubhttps://
.Połączenie nie powiedzie się w poniższych przypadkach:
Wszelkie obejście tego ograniczenia byłoby wyjątkowo niepewne.
Wyobraź sobie na przykład, że zarejestrowałem domenę superwinningcontest.com i wysłałem linki do e-maili użytkowników. Gdy załadowali stronę główną, mogłem tam ukryć kilka
iframe
sekund i przeczytać ich kanał na Facebooku, sprawdzić ostatnie transakcje Amazon lub PayPal lub - jeśli korzystali z usługi, która nie zapewniała wystarczającego bezpieczeństwa - przelać pieniądze z ich konta Dlatego JavaScript jest ograniczony do tej samej domeny i tego samego protokołu.źródło
W ramce IFRAME upublicznij swoją funkcję dla obiektu window:
Aby uzyskać dostęp ze strony nadrzędnej, użyj tego:
źródło
onclick()
zdarzenie po prostu wywołujewindow.print()
. Powoduje wydrukowanie treści z następującychiframe
doskonale. Ale gdy wywoływana jest funkcja publiczna strony iframewindow.print()
i jeśli strona nadrzędna wywołuje funkcję publiczną, treść rodzica jest drukowana. Jak mam to kodować, aby wywołaniewindow.print()
funkcji publicznej zachowywało się tak, jak wonclick
przypadku zdarzenia?onclick
. Chcesz zadzwonićiframe.contentWindow.print()
.document.getElementById('myFrame').contentWindow.print();' and the pubic function
printContent () `(nie program obsługi zdarzeń oncick), który wywołuje wywołano wwindow.print()
ten sposób:document.getElementById('myFrame').contentWindow.printContent();
Jeśli cel elementu iFrame i dokument zawierający są w innej domenie, wcześniej opublikowane metody mogą nie działać, ale istnieje rozwiązanie:
Na przykład, jeśli dokument A zawiera element iframe, który zawiera dokument B, a skrypt w dokumencie A wywołuje metodę postMessage () na obiekcie okna dokumentu B, wówczas zostanie wywołane zdarzenie komunikatu na tym obiekcie, oznaczone jako pochodzące z okna dokument A. Skrypt w dokumencie A może wyglądać następująco:
Aby zarejestrować moduł obsługi zdarzeń dla zdarzeń przychodzących, skrypt użyłby metody addEventListener () (lub podobnych mechanizmów). Na przykład skrypt w dokumencie B może wyglądać następująco:
Skrypt ten najpierw sprawdza, czy domena jest domeną oczekiwaną, a następnie sprawdza wiadomość, którą albo wyświetla użytkownikowi, albo odpowiada, wysyłając wiadomość z powrotem do dokumentu, który wysłał wiadomość w pierwszej kolejności.
przez http://dev.w3.org/html5/postmsg/#web-messaging
źródło
Dla przypomnienia napotkałem dzisiaj ten sam problem, ale tym razem strona została osadzona w obiekcie, a nie w ramce iframe (ponieważ był to dokument XHTML 1.1). Oto jak to działa z obiektami:
(przepraszam za brzydkie podziały linii, nie pasowały do jednej linii)
źródło
Ramka IFRAME powinna znajdować się w
frames[]
kolekcji. Użyj czegoś takiegoźródło
method
deweloper musi zrobić właściwość obiektu iframewindow
.Quirksmode miał na ten temat post .
Ponieważ strona jest teraz zepsuta i dostępna tylko przez archive.org, odtworzyłem ją tutaj:
Ramki
Na tej stronie przedstawiam krótki przegląd dostępu do ramek iframe ze strony, na której są. Nic dziwnego, że istnieją pewne uwagi dotyczące przeglądarki.
Ramka iframe jest ramką wbudowaną, która mimo że zawiera całkowicie oddzielną stronę z własnym adresem URL, jest jednak umieszczana wewnątrz innej strony HTML. Daje to bardzo ładne możliwości w zakresie projektowania stron internetowych. Problem polega na uzyskaniu dostępu do ramki iframe, na przykład w celu załadowania do niej nowej strony. Ta strona wyjaśnia, jak to zrobić.
Rama czy obiekt?
Podstawowe pytanie dotyczy tego, czy element iframe jest postrzegany jako ramka, czy jako obiekt.
top.frames[1].frames[2]
i tak dalej) hierarchię ramek . Czy iframe pasuje do tej hierarchii ramek?document.getElementById('theiframe'))
aby uzyskać do niego dostęp. Zasadniczo przeglądarki zezwalają na oba widoki na „prawdziwe” (zakodowane na stałe) iframe, ale generowanych iframe nie można uzyskać jako ramek.Atrybut NAME
Najważniejszą zasadą jest podanie dowolnego elementu iframe, który utworzysz
name
, nawet jeśli używasz równieżid
.Większość przeglądarek potrzebuje tego
name
atrybutu, aby element iframe stał się częścią hierarchii ramek. Niektóre przeglądarki (zwłaszcza Mozilla) wymagają,id
aby iframe był dostępny jako obiekt. Przypisując oba atrybuty do elementu iframe, opcje pozostają otwarte. Alename
jest o wiele ważniejsze niżid
.Dostęp
Albo uzyskujesz dostęp do iframe jako obiektu i zmieniasz jego,
src
albo uzyskujesz dostęp do iframe jako ramki i zmieniasz jegolocation.href
.document.getElementById ('iframe_id'). src = 'newpage.html'; frames ['iframe_name']. location.href = 'newpage.html'; Składnia ramki jest nieco lepsza, ponieważ Opera 6 ją obsługuje, ale nie składni obiektowej.
Dostęp do iframe
Aby uzyskać pełną obsługę wielu przeglądarek, należy nadać ramce iframe nazwę i użyć
składnia. O ile wiem, to zawsze działa.
Dostęp do dokumentu
Dostęp do dokumentu w ramce iframe jest dość prosty, pod warunkiem użycia
name
atrybutu. Aby policzyć liczbę łączy w dokumencie w ramce iframe, wykonajframes['testiframe'].document.links.length
.Wygenerowane iframe
Podczas generowania elementu iframe za pośrednictwem DOM W3C element iframe nie jest natychmiast wprowadzany do
frames
tablicy, aframes['testiframe'].location.href
składnia nie działa od razu. Przeglądarka potrzebuje trochę czasu, zanim ramka iframe pojawi się w tablicy, czas, w którym żaden skrypt nie może zostać uruchomiony.document.getElementById('testiframe').src
Składnia działa dobrze w każdych okolicznościach.target
Atrybutem link nie działa albo z wygenerowanych iframe, z wyjątkiem Opery, choć dałem wygenerowany iframe zarównoname
iid
.Brak
target
wsparcia oznacza, że musisz używać JavaScript do zmiany zawartości generowanego elementu iframe, ale ponieważ i tak potrzebujesz JavaScript, aby go wygenerować, nie widzę w tym większego problemu.Rozmiar tekstu w ramkach iframe
Ciekawy błąd tylko w Explorer 6:
Po zmianie rozmiaru tekstu za pomocą menu Widok rozmiary tekstu w ramkach iframe są odpowiednio zmieniane. Jednak ta przeglądarka nie zmienia podziałów wierszy w oryginalnym tekście, więc część tekstu może stać się niewidoczna lub mogą wystąpić podziały wierszy, podczas gdy linia może zawierać jeszcze jedno słowo.
źródło
Znalazłem dość eleganckie rozwiązanie.
Jak powiedziałeś, dość łatwo jest wykonać kod znajdujący się w dokumencie nadrzędnym. I to jest podstawa mojego kodu, wręcz przeciwnie.
Gdy ładuje się mój element iframe, wywołuję funkcję znajdującą się w dokumencie nadrzędnym, przekazując jako argument odwołanie do funkcji lokalnej znajdującej się w dokumencie elementu iframe. Dokument nadrzędny ma teraz bezpośredni dostęp do funkcji iframe poprzez to odwołanie.
Przykład:
Na rodzicu:
W ramce iframe:
Kiedy iframe się ładuje, wywoła parent.tunnel (YourFunctionReference), który wykona funkcję otrzymaną w parametrze.
To proste, bez konieczności radzenia sobie ze wszystkimi niestandardowymi metodami z różnych przeglądarek.
źródło
Niektóre z tych odpowiedzi nie odnoszą się do problemu CORS lub nie pokazują, gdzie umieszczasz fragmenty kodu, aby umożliwić komunikację.
Oto konkretny przykład. Powiedzmy, że chcę kliknąć przycisk na stronie nadrzędnej i niech coś zrobi w ramce iframe. Oto jak bym to zrobił.
Parent_frame.html
iframe_page.html
Aby przejść w drugą stronę (kliknij przycisk wewnątrz elementu iframe, aby wywołać metodę poza elementem iframe), po prostu zmień miejsce, w którym fragment kodu jest aktywny, i zmień to:
do tego:
źródło
Kontynuując odpowiedź JoelAnair :
Aby uzyskać większą niezawodność, użyj:
Działa jak urok :)
źródło
Postępując zgodnie z odpowiedzią Nitin Bansal
i dla jeszcze większej niezawodności:
i
źródło
źródło
Te same rzeczy, ale nieco łatwiejszym sposobem będzie Jak odświeżyć stronę nadrzędną ze strony w elemencie iframe . Wystarczy wywołać funkcję strony nadrzędnej, aby wywołać funkcję javascript w celu ponownego załadowania strony:
Lub zrób to bezpośrednio ze strony w ramce iframe:
Obie prace.
źródło
Spróbuj tylko
parent.myfunction()
źródło
Jeśli chcesz wywołać funkcję JavaScript na obiekcie nadrzędnym z elementu iframe wygenerowanego przez inną funkcję, np. Shadowbox lub lightbox.
Powinieneś spróbować użyć
window
obiektu i wywołać funkcję nadrzędną:źródło
Użyj następującego, aby wywołać funkcję ramki na stronie nadrzędnej
źródło