71 lines
1.6 KiB
HTML
71 lines
1.6 KiB
HTML
<!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>
|