Wywoływanie kodu JavaScript w elemencie iframe ze strony nadrzędnej

Zasadniczo mam iframeosadzoną na stronie i iframema 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.

Załóżmy, że identyfikator iFrame to „targetFrame”, a funkcja, którą chcesz wywołać, to targetFunction():

document.getElementById('targetFrame').contentWindow.targetFunction();

Możesz również uzyskać dostęp do ramki za pomocą window.frameszamiast document.getElementById.

// this option does not work in most of latest versions of chrome and Firefox
window.frames[0].frameElement.contentWindow.targetFunction(); 

Jest kilka dziwactw, o których należy pamiętać.

1. HTMLIFrameElement.contentWindowjest 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 temat windowobiektu.

2. 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 odzyskujesz windowobiekt z tego samego powodu, co (1), ale możesz wybrać tutaj kilka dodatkowych wersji przeglądarki.

3. 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).

4. 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.

5. 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.parentskrypt, 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.

Wywołanie nadrzędnej funkcji JS z iframejest możliwe, ale tylko wtedy, gdy zarówno rodzic, jak i strona załadowana do iframesą z tej samej domeny, tj. Abc.com, i oba używają tego samego protokołu, tzn. Oba są włączone http://lub https://.

Połączenie nie powiedzie się w poniższych przypadkach:

1. Strona nadrzędna i strona iframe pochodzą z innej domeny.
   
2. Używają różnych protokołów, jeden znajduje się na http: // a drugi na https: //.
   

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 iframesekund 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.

W ramce IFRAME upublicznij swoją funkcję dla obiektu window:

window.myFunction = function(args) {
   doStuff();
}

Aby uzyskać dostęp ze strony nadrzędnej, użyj tego:

var iframe = document.getElementById("iframeId");
iframe.contentWindow.myFunction(args);

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:

var o = document.getElementsByTagName('iframe')[0];
o.contentWindow.postMessage('Hello world', 'http://b.example.org/');

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:

window.addEventListener('message', receiver, false);
function receiver(e) {
  if (e.origin == 'http://example.com') {
    if (e.data == 'Hello world') {
      e.source.postMessage('Hello', e.origin);
    } else {
      alert(e.data);
    }
  }
}

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

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:

document
  .getElementById('targetFrame')
  .contentDocument
  .defaultView
  .targetFunction();

(przepraszam za brzydkie podziały linii, nie pasowały do ​​jednej linii)

Ramka IFRAME powinna znajdować się w frames[]kolekcji. Użyj czegoś takiego

frames['iframeid'].method();

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.

• Jak wyjaśniono na stronie Wprowadzenie do ramek , jeśli używasz ramek, przeglądarka tworzy dla Ciebie ( top.frames[1].frames[2]i tak dalej) hierarchię ramek . Czy iframe pasuje do tej hierarchii ramek?
• Czy też przeglądarka widzi element iframe jako kolejny obiekt, obiekt, który ma właściwość src? W takim przypadku musimy użyć standardowego wywołania DOM (na przykład, 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.

<iframe src="iframe_page1.html"
    id="testiframe"
    name="testiframe"></iframe>

Większość przeglądarek potrzebuje tego nameatrybutu, aby element iframe stał się częścią hierarchii ramek. Niektóre przeglądarki (zwłaszcza Mozilla) wymagają, idaby iframe był dostępny jako obiekt. Przypisując oba atrybuty do elementu iframe, opcje pozostają otwarte. Ale namejest o wiele ważniejsze niż id.

Dostęp

Albo uzyskujesz dostęp do iframe jako obiektu i zmieniasz jego, srcalbo uzyskujesz dostęp do iframe jako ramki i zmieniasz jego location.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ć

frames['testiframe'].location.href

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 nameatrybutu. Aby policzyć liczbę łączy w dokumencie w ramce iframe, wykonaj frames['testiframe'].document.links.length.

Wygenerowane iframe

Podczas generowania elementu iframe za pośrednictwem DOM W3C element iframe nie jest natychmiast wprowadzany do framestablicy, a frames['testiframe'].location.hrefskł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').srcSkładnia działa dobrze w każdych okolicznościach.

targetAtrybutem link nie działa albo z wygenerowanych iframe, z wyjątkiem Opery, choć dałem wygenerowany iframe zarówno namei id.

Brak targetwsparcia 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.

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:

function tunnel(fn) {
    fn();
}

W ramce iframe:

var myFunction = function() {
    alert("This work!");
}

parent.tunnel(myFunction);

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.

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

<button id='parent_page_button' onclick='call_button_inside_frame()'></button>

function call_button_inside_frame() {
   document.getElementById('my_iframe').contentWindow.postMessage('foo','*');
}

iframe_page.html

window.addEventListener("message", receiveMessage, false);

function receiveMessage(event)
    {
      if(event) {
        click_button_inside_frame();
    }
}

function click_button_inside_frame() {
   document.getElementById('frame_button').click();
}

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:

document.getElementById('my_iframe').contentWindow.postMessage('foo','*');

do tego:

window.parent.postMessage('foo','*')

Kontynuując odpowiedź JoelAnair :

Aby uzyskać większą niezawodność, użyj:

var el = document.getElementById('targetFrame');

if(el.contentWindow)
{
   el.contentWindow.targetFunction();
}
else if(el.contentDocument)
{
   el.contentDocument.targetFunction();
}

Działa jak urok :)

Postępując zgodnie z odpowiedzią Nitin Bansal

i dla jeszcze większej niezawodności:

function getIframeWindow(iframe_object) {
  var doc;

  if (iframe_object.contentWindow) {
    return iframe_object.contentWindow;
  }

  if (iframe_object.window) {
    return iframe_object.window;
  } 

  if (!doc && iframe_object.contentDocument) {
    doc = iframe_object.contentDocument;
  } 

  if (!doc && iframe_object.document) {
    doc = iframe_object.document;
  }

  if (doc && doc.defaultView) {
   return doc.defaultView;
  }

  if (doc && doc.parentWindow) {
    return doc.parentWindow;
  }

  return undefined;
}

i

...
var el = document.getElementById('targetFrame');

var frame_win = getIframeWindow(el);

if (frame_win) {
  frame_win.targetFunction();
  ...
}
...

       $("#myframe").load(function() {
            alert("loaded");
        });

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:

window.location.reload();

Lub zrób to bezpośrednio ze strony w ramce iframe:

window.parent.location.reload();

Obie prace.

Spróbuj tylko parent.myfunction()

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ć windowobiektu i wywołać funkcję nadrzędną:

window.parent.targetFunction();

Użyj następującego, aby wywołać funkcję ramki na stronie nadrzędnej

parent.document.getElementById('frameid').contentWindow.somefunction()