Теряется связь с iframe при document.write.

[ruslan_mart]

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

(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 не срабатывает.

[рони]

ruslan_mart,
страница формируется заново, если document.write используют после загрузки страницы.

[ruslan_mart]

рони, ну окружение по идее не меняется, все переменные и функции остаются. Тут только непонятно, почему связь с contentWindow теряется.

[brizing]

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

Эвент листенер здорового человека:
https://ucalc.pro/help/src/b9/04-09-xwc1n.png

[j0hnik]

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

[рони]

Тут только непонятно, почему связь с contentWindow теряется.

так нет же никакого прежнего
contentWindow

[ruslan_mart]

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?

[ruslan_mart]

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?

[ruslan_mart]

Всё, понял в чём подвох, спасибо.

[j0hnik]

ruslan_mart,
?