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

[ruslan_mart]

j0hnik, подвох в том, что при document.write - window как-то обнуляется, т.е. ссылка на него остаётся та же, но он рефрешится. А все глобальные переменные остаются на месте.

Решение:

(function() {

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

	var write = function(content) {
		frame.contentWindow.postMessage(JSON.stringify({type: 'write', value: content}), '*');
	};

	var close = function() {
		frame.contentWindow.postMessage(JSON.stringify({type: 'close'}), '*');
	};

	frame.onload = function() {
		this.onload = null;
		write('<div>Line 1</div>');
		write('<div>Line 2</div>');
		write('<b>Bold text</b>');
		close();
		write('<div>Line 3</div>');
		write('<div>Line 4</div>');
		write('<b>Bold text</b>');
		close();
	};

	frame.src = 'data:text/html,' + encodeURIComponent(`
		<script>
			(function() {
				var documentWrite = document.write.bind(document);
				
				var onMessage = function(event) {
					var data = JSON.parse(event.data);
					
					if(data.type === 'write') {
						document.write(data.value);
					}
					else if(data.type === 'close') {
						document.close();
					}
				};
				
				document.write = function(content) {
					var refreshed = document.readyState !== 'loading';
					
					documentWrite(content);
					
					if(refreshed) {
						window.onmessage = onMessage;
					}
				};
				
				window.onmessage = onMessage;
			})();
		<\/script>	
	`);

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

})();

[brizing]

подвох в том, что при document.write - window как-то обнуляется, т.е. ссылка на него остаётся та же, но он рефрешится. А все глобальные переменные остаются на месте.

Документ перезаписывается.
Обработчик события висит на документе, так что он пропадает.
Можно заново назначать обработчик.

(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>
			var onMessage = function onMessageFn (event) {
				console.log(event.data);
				document.write(event.data);
				window.onmessage = onMessageFn;
			};
			window.onmessage = onMessage;
		<\/script>	
	`);

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

})();