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

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ź

odpowiedź 19 lutego 2016 przez Comandeer Guru (604,920 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,920 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,920 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>