• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Komunikacja z elementem iframe poprzez metodę postMessage() - nie działa

VPS Starter Arubacloud
+1 głos
640 wizyt
pytanie zadane 19 lutego 2016 w JavaScript przez ScriptyChris Mędrzec (190,190 p.)

Mam dwa pliki HTML w folderze:

- index.html (główny, który zawiera iframe)

- screens.html (do niego odnosi się iframe)

Chcę skorzystać z metody postMessage(), aby móc przesłać Z głównej strony DO iframe'a jakieś dane.

Cały kod (są tam dwa pliki JS i dwa HTML oraz CSS): http://plnkr.co/edit/q9Whqt0RfA90UwxQkFDv?p=preview

W konsoli widać, że jest błąd w linijce nr 5 głównego skryptu (script.js):

  var frame = document.getElementById('innerScreen').contentWindow;

Uncaught TypeError: Cannot read property 'contentWindow' of null

Przy różnych próbach konsola twierdzi, że oba pliki znajdują się w różnych domenach lub mają różne porty i dostęp do DOM elementu iframe nie jest mozliwy. Ja wszystko trzymam w jednym folderze, więc nie wiem o co chodzi? Czy nie można jako adresu podać np. ścieżki do pliku (relatywna), zamiast adresu hosta (absolutna)?

1 odpowiedź

+2 głosów
odpowiedź 19 lutego 2016 przez Comandeer Guru (604,880 p.)
wybrane 19 lutego 2016 przez ScriptyChris
 
Najlepsza

Wali błędem, bo odpalasz działania na elementach zanim one się pojawią w drzewku DOM. Dlatego start musisz albo odpalać w trakcie zdarzenia DOMContentLoaded, albo umieścić skrypt na końcu body, co jest polecaną praktyką → https://developer.yahoo.com/performance/rules.html#js_bottom

Natomiast jeśli odpalasz to z dysku, to może nie działać, bo różne pliki prawdopodobnie mogą być traktowane jako mające różny origin (Chrome miało wprowadzić unikatowe origin dla każdego pliku – być może inne przeglądarki też to mają).

komentarz 19 lutego 2016 przez ScriptyChris Mędrzec (190,190 p.)
Przeniosłem skrypt JS na koniec body i teraz w konsoli nic się nie pojawia, tzn ani nie ma błędu ani informacji z drugiego skryptu o otrzymaniu wiadomości. Czy to już może być wina różnych originów, czy źle przesyłam wiadomość (albo źle odbieram)?
komentarz 19 lutego 2016 przez Comandeer Guru (604,880 p.)
A czekasz aż załaduje się dokument w ramce? Bo tutaj może być problem ;)
komentarz 19 lutego 2016 przez ScriptyChris Mędrzec (190,190 p.)

Ustawiłem setTimeout() na 100ms (dla głównego JS - skąd wysyłam postMessage()) i 200ms (skrypt dla iframe, który powinien odebrać wiadomość) i nic.

komentarz 19 lutego 2016 przez Comandeer Guru (604,880 p.)

Główny plik:

<!DOCTYPE html>
	<html lang="pl" dir="ltr">
		<head>
			<meta charset="UTF-8">
			<title>Ehhhh</title>
			<style>
			</style>
		</head>
		<body>
		<iframe src="iframe.html" width="300" height="200"></iframe>

		<script>
		var iframe = document.querySelector( 'iframe' );

		iframe.addEventListener( 'load', function() {
			iframe.contentWindow.postMessage( 'test', '*' );
		} );
		</script>
		</body>
	</html>

Plik ramki:

<!DOCTYPE html>
	<html lang="pl" dir="ltr">
		<head>
			<meta charset="UTF-8">
			<title>Ehhhh</title>
			<style>
			</style>
		</head>
		<body>
		Rameczka

		<script>
		window.addEventListener( 'message', function( e ) {
			console.log( e );
		} );
		</script>
		</body>
	</html>

 

komentarz 19 lutego 2016 przez ScriptyChris Mędrzec (190,190 p.)
Działa, dzięki! Czyli, że muszę jeszcze wiele odmian EventListenerów przyswoić.

Podobne pytania

0 głosów
0 odpowiedzi 182 wizyt
pytanie zadane 22 listopada 2018 w C i C++ przez Mitop Użytkownik (700 p.)
0 głosów
1 odpowiedź 744 wizyt
+1 głos
2 odpowiedzi 335 wizyt
pytanie zadane 25 kwietnia 2019 w PHP przez iframeeh Użytkownik (680 p.)

93,008 zapytań

141,975 odpowiedzi

321,256 komentarzy

62,350 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj

Wprowadzenie do ITsec, tom 2

Można już zamawiać tom 2 książki "Wprowadzenie do bezpieczeństwa IT" - będzie to około 650 stron wiedzy o ITsec (17 rozdziałów, 14 autorów, kolorowy druk).

Planowana premiera: 30.09.2024, zaś planowana wysyłka nastąpi w drugim tygodniu października 2024.

Warto preorderować, tym bardziej, iż mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy dodatkowe 15% zniżki! Dziękujemy zaprzyjaźnionej ekipie Sekuraka za kod dla naszej Społeczności!

...