Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 09.04.2018, 23:47
Аватар для ruslan_mart
Профессор
Отправить личное сообщение для ruslan_mart Посмотреть профиль Найти все сообщения от ruslan_mart
 
Регистрация: 30.04.2012
Сообщений: 2,930

Теряется связь с iframe при document.write.
Всем доброго времени суток!
Кто-нибудь может объяснить в чём тут подвох?

(function() {

	var frame = document.createElement('iframe');

	var write = function(content) {
		frame.contentWindow.postMessage(content, '*');
	};

	frame.onload = function() {
		write('<div>Line 1</div>');
		write('<div>Line 2</div>');
	};

	frame.src = 'data:text/html,' + encodeURIComponent(`
		<script>
			window.addEventListener('message', function(event) {
				console.log(event.data);
				document.write(event.data);
			});
		<\/script>	
	`);

	document.addEventListener('DOMContentLoaded', function() {
		document.body.appendChild(frame);
	});

})();


После document.write внутри iframe - полностью теряется связь с ним. Как с этим бороться?
На примере видим, что после первого "write", второй - совсем перестаёт работать, даже onmessage не срабатывает.
Ответить с цитированием
  #2 (permalink)  
Старый 10.04.2018, 00:10
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 29,602

ruslan_mart,
страница формируется заново, если document.write используют после загрузки страницы.
Ответить с цитированием
  #3 (permalink)  
Старый 10.04.2018, 00:34
Аватар для ruslan_mart
Профессор
Отправить личное сообщение для ruslan_mart Посмотреть профиль Найти все сообщения от ruslan_mart
 
Регистрация: 30.04.2012
Сообщений: 2,930

рони, ну окружение по идее не меняется, все переменные и функции остаются. Тут только непонятно, почему связь с contentWindow теряется.
Ответить с цитированием
  #4 (permalink)  
Старый 10.04.2018, 00:39
Аватар для brizing
Интересующийся
Отправить личное сообщение для brizing Посмотреть профиль Найти все сообщения от brizing
 
Регистрация: 08.02.2014
Сообщений: 23

Эвент листенер курильщика:
https://ucalc.pro/help/src/b9/04-09-1pxjt.png

Эвент листенер здорового человека:
https://ucalc.pro/help/src/b9/04-09-xwc1n.png
Ответить с цитированием
  #5 (permalink)  
Старый 10.04.2018, 00:51
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

<script>
(function() {

	var frame = document.createElement('iframe');

	var write = function(content) {
		frame.contentWindow.postMessage(content, '*');
	};

	frame.src = 'data:text/html,' + encodeURIComponent(`
		<script>
			window.addEventListener('message', function(event) {
				console.log(event.data);
				document.write(event.data);
			});
		<\/script>	
	`);

	document.addEventListener('DOMContentLoaded', function() {
		document.body.appendChild(frame);
		document.querySelector('iframe').contentWindow.document.write('<div>Line 1</div>');
		document.querySelector('iframe').contentWindow.document.write('<div>Line 2</div>');
	});
})();
</script>
Ответить с цитированием
  #6 (permalink)  
Старый 10.04.2018, 00:51
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 29,602

Сообщение от ruslan_mart
Тут только непонятно, почему связь с contentWindow теряется.
так нет же никакого прежнего
contentWindow
Ответить с цитированием
  #7 (permalink)  
Старый 10.04.2018, 01:25
Аватар для ruslan_mart
Профессор
Отправить личное сообщение для ruslan_mart Посмотреть профиль Найти все сообщения от ruslan_mart
 
Регистрация: 30.04.2012
Сообщений: 2,930

j0hnik, слишком очевидный вариант, не подойдёт, так как у меня iframe будет изолирован через sandbox.

рони,

(function() {

	var frame = document.createElement('iframe');
	frame.sandbox = 'allow-scripts';

	var write = function(content) {
		frame.contentWindow.postMessage(content, '*');
	};

	frame.onload = function() {
		write(`
			<script>
				setInterval(function() {
					document.write('<div>Line ' + index++ + '</div>');
				}, 1000);
			<\/script>
		`);
		setTimeout(function() {
			write('<div><b>Bold line</b></div>');
		}, 3000);
	};

	frame.src = 'data:text/html,' + encodeURIComponent(`
		<script>
			var index = 1;
			
			window.addEventListener('message', function(event) {
				console.log(event.data);
				document.write(event.data);
			});
		<\/script>	
	`);

	document.addEventListener('DOMContentLoaded', function() {
		document.body.appendChild(frame);
	});

})();


Вот тут наглядно видно, что первый write срабатывает и начинает бесконечно отрабатывать интервал, переменная index прибавляется. А значит, окружение не меняется, физически остаётся всё то же самое. Непонятно только одно, почему contentWindow становится другой.
index ведь остаётся, а куда тогда пропадает обработчик message?
Ответить с цитированием
  #8 (permalink)  
Старый 10.04.2018, 01:33
Аватар для ruslan_mart
Профессор
Отправить личное сообщение для ruslan_mart Посмотреть профиль Найти все сообщения от ruslan_mart
 
Регистрация: 30.04.2012
Сообщений: 2,930

window.addEventListener('message', function() {
	console.log('MESSAGE');
});

window.dispatchEvent(new Event('message')); //Работает

document.addEventListener('DOMContentLoaded', function() {
	document.write('<div>Line 1</div>');

	console.log('LOG'); //Работает

	window.dispatchEvent(new Event('message')); //Не работает
});


Ну вот какого чёрта? Почему так?
window ведь тот же, почему message перестаёт реагировать после document.write?
Ответить с цитированием
  #9 (permalink)  
Старый 10.04.2018, 01:42
Аватар для ruslan_mart
Профессор
Отправить личное сообщение для ruslan_mart Посмотреть профиль Найти все сообщения от ruslan_mart
 
Регистрация: 30.04.2012
Сообщений: 2,930

Всё, понял в чём подвох, спасибо.
Ответить с цитированием
  #10 (permalink)  
Старый 10.04.2018, 01:42
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

ruslan_mart,
?
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Обратная связь ПРИ ПОМОЩИ JavaScript qwertypop Элементы интерфейса 2 23.04.2009 18:30
установка позиции курсора или выделения в iframe mister_maxim Events/DOM/Window 5 18.04.2009 10:43
Завершение процесса воспроизведения видео при закрытии окна IE skif Общие вопросы Javascript 0 11.03.2009 08:11
Проблема в document.write при использовании setInterval() GOll Общие вопросы Javascript 21 06.10.2008 17:38
Теряется event при перемещении объекта (Drag&Drop) seagor Events/DOM/Window 16 25.07.2007 01:28