oleg
/
monaco-editor
mirror of https://github.com/microsoft/monaco-editor.git


			
				
					
						
						
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970
							<!DOCTYPE html>
<html>
	<head>
		<title>Editor in tiny iframe</title>

		<style>
			#myIframe1 {
				border: 1px solid blue;
				width: 0;
				height: 0;
			}
			#myIframe2 {
				border: 1px solid red;
				display: none;
			}
			#myIframe3 {
				border: 1px solid green;
				visibility: hidden;
			}
			#programmaticIframe {
				border: 1px solid yellow;
			}
		</style>
	</head>

	<body>
		<h2>Monaco Editor inside iframes sample</h2>

		<br />
		<br />
		0x0:
		<br />
		<iframe id="myIframe1" src="inner.html"></iframe>
		display:none:
		<br />
		<iframe id="myIframe2" src="inner.html"></iframe>
		visibility:hidden:
		<br />
		<iframe id="myIframe3" src="inner.html"></iframe>
		taken off-dom while loading:
		<br />

		<script>
			var myIframe1 = document.getElementById('myIframe1');
			var myIframe2 = document.getElementById('myIframe2');
			var myIframe3 = document.getElementById('myIframe3');
			var programmaticIframe = document.createElement('iframe');
			programmaticIframe.id = 'programmaticIframe';
			programmaticIframe.src = 'inner.html';
			// trigger its loading & take it off dom
			document.body.appendChild(programmaticIframe);

			setTimeout(function () {
				document.body.removeChild(programmaticIframe);
			}, 10);

			setTimeout(function () {
				document.body.appendChild(programmaticIframe);
				[myIframe1, myIframe2, myIframe3, programmaticIframe].forEach(reveal);
			}, 3000);

			function reveal(iframe) {
				iframe.style.width = '400px';
				iframe.style.height = '100px';
				iframe.style.display = 'block';
				iframe.style.visibility = 'visible';
			}
		</script>
	</body>
</html>