Chcę wywołać funkcję JavaScript okna nadrzędnego z elementu iframe.
<script>
function abc()
{
alert("sss");
}
</script>
<iframe id="myFrame">
<a onclick="abc();" href="#">Call Me</a>
</iframe>
javascript
iframe
onclick
Arjun Singh
źródło
źródło
Odpowiedzi:
Zobacz window.parent
Zwraca odniesienie do elementu nadrzędnego bieżącego okna lub ramy pomocniczej.
Jeśli okno nie ma elementu nadrzędnego, jego właściwość nadrzędna jest odniesieniem do samego siebie.
Gdy okno jest ładowany w sposób
<iframe>
,<object>
lub<frame>
jego rodzic jest okno z elementem osadzającym okno.źródło
alert
zostanie przywołany;alert
funkcja rodzica lub funkcja iframealert
, w przypadku gdyparent.abc();
jest wywoływana w iframe?window.postMessage()
(lubwindow.parent.postMessage()
) istnieje. Sprawdź @Andrii odpowiedźNiedawno musiałem dowiedzieć się, dlaczego to też nie zadziałało.
Skrypt javascript, do którego chcesz zadzwonić z elementu iframe dziecka, musi znajdować się w głowie rodzica. Jeśli jest w treści, skrypt nie jest dostępny w zasięgu globalnym.
Mam nadzieję, że pomoże to każdemu, kto ponownie natknie się na ten problem.
źródło
Window.postMessage ()
Ta metoda pozwala bezpiecznie
cross-origin
komunikację.A jeśli masz dostęp do kodu strony nadrzędnej, można wywołać dowolną metodę nadrzędną, a także dowolne dane można przekazać bezpośrednio
Iframe
. Oto mały przykład:Strona nadrzędna:
Kod iframe:
AKTUALIZACJE:
Uwaga bezpieczeństwa:
Zawsze podawaj określony cel ORIGIN, NIE
*
, jeśli wiesz, gdzie powinien znajdować się dokument drugiego okna. Niepodanie konkretnego celu ujawnia dane, które wysyłasz do dowolnej zainteresowanej złośliwej strony (komentarz ZalemCitizen ).Bibliografia:
źródło
Zamieściłem to jako osobną odpowiedź, ponieważ nie ma to związku z moją istniejącą odpowiedzią.
Ten problem ostatnio pojawił się ponownie w celu uzyskania dostępu do elementu nadrzędnego z elementu iframe odwołującego się do poddomeny, a istniejące poprawki nie działały.
Tym razem odpowiedzią było zmodyfikowanie dokumentu. Domena strony nadrzędnej i elementu iframe, aby były takie same. To oszuka te same kontrole zasad pochodzenia że będą one współistnieć w dokładnie tej samej domenie (poddomeny są uważane za innego hosta i nie przejdą tego samego testu zasad pochodzenia).
Wstaw następujące elementy do
<head>
strony w elemencie iframe, aby dopasować do domeny nadrzędnej (dostosuj do swojego typu dokumentu).Pamiętaj, że spowoduje to zgłoszenie błędu na rozwój hosta lokalnego, więc użyj poniższej kontroli, aby uniknąć błędu:
źródło
example.com
iframeabc.example.com
, wtedy zarówno rodzic, jak i iframe muszą zadzwonićdocument.domain = "example.com"
Możesz użyć
patrz poniżej.
źródło
abc()
działałoby tylko wtedy, gdyfunction abc()
zostało zadeklarowane w ramce iframe, a nie na stronie nadrzędnej.window.top.abc()
wyłamuje się z elementu iframe w dokumencie nadrzędnym.Kolejny dodatek dla tych, którzy go potrzebują. Rozwiązanie Ash Clarke nie działa, jeśli używają różnych protokołów, więc upewnij się, że jeśli używasz SSL, twoja ramka iframe również używa SSL, albo spowoduje to uszkodzenie funkcji. Jego rozwiązanie zadziałało jednak w przypadku samych domen, więc dziękuję za to.
źródło
Rozwiązanie podane przez Ash Clarke dla poddomen działa świetnie, ale pamiętaj, że musisz dołączyć document.domain = "mydomain.com"; zarówno w nagłówku strony iframe, jak i nagłówku strony nadrzędnej, jak podano w linku , sprawdza to samo zasady pochodzenia
źródło
document.domain
?localhost
lub adres IP urządzenia (zazwyczaj127.0.0.1
), w zależności od tego, co znajduje się w pasku adresu url.Parent.abc () będzie działać tylko w tej samej domenie ze względów bezpieczeństwa. wypróbowałem to obejście i mój działał idealnie.
Mam nadzieję że to pomoże. :)
źródło
W przeglądarce Firefox i Chrome możesz używać:
Jeśli moja funkcja jest obecna zarówno w ramce iframe, jak i w elemencie macierzystym, zostanie wywołana funkcja nadrzędna.
źródło
Chociaż niektóre z tych rozwiązań mogą działać, żadne z nich nie przestrzega najlepszych praktyk. Wielu przypisuje zmienne globalne i może się zdarzyć, że wywołujesz wiele zmiennych nadrzędnych lub funkcji, co prowadzi do zaśmieconej, wrażliwej przestrzeni nazw.
Aby tego uniknąć, użyj wzorca modułu. W oknie nadrzędnym:
Następnie w ramce iframe:
Jest to podobne do wzorców opisanych w rozdziale Dziedziczenie przełomowego tekstu Crockforda „Javascript: The Good Parts”. Możesz także dowiedzieć się więcej na stronie w3 o najlepszych praktykach Javascript. https://www.w3.org/wiki/JavaScript_best_practices#Avoid_globals
źródło