<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/austinkregel/pen/GHmjD?depth=everything&order=popularity&page=100&q=iframe&show_forks=false" />
<style class="cp-pen-styles"> *{
margin:0;
padding:0;
}
body{
background:darkred;
}
.body:before {
background-image: -webkit-gradient(radial, 50%, 0, 50%, 95, color-stop(20%, rgba(0, 0, 0, 0)), color-stop(95%, #000000));
background-image: -webkit-radial-gradient(center, ellipse cover, rgba(0, 0, 0, 0) 20%, #000000 95%);
background-image: -moz-radial-gradient(center, ellipse cover, rgba(0, 0, 0, 0) 20%, #000000 95%);
background-image: -o-radial-gradient(center, ellipse cover, rgba(0, 0, 0, 0) 20%, #000000 95%);
background-image: radial-gradient(center, ellipse cover, rgba(0, 0, 0, 0) 20%, #000000 95%);
position: absolute;
content: "";
z-index: -1;
opacity: 0.9;
height: 100%;
width: 100%;
left: 0;
top: 0;
}
.body:after {
background: url("https://s.cdpn.io/1715/noise-1.png");
position: absolute;
content: "";
z-index: 0;
opacity: 0.8;
height: 100%;
width: 100%;
left: 0;
top: 0;
}
#html{
width:32%;
height:300px;
position:absolute;
top:30px;
left:10px;
}
#css{
resize:none;
width:32%;
height:300px;
position:absolute;
top:30px;
left:34% ;
}
#js{
resize:none;
width:32%;
height:300px;
position:absolute;
top:30px;
left:67%;
}
iframe{
position:absolute;
top:350px;
width:100%;
height:300px;
background:white;
}
#button{
position:absolute;
top:0;
}
.html{
position:absolute;
z-index:10;
color:gray;
font-size:14px;
border:solid thin gray;
padding-left:2px;
padding-right:2px;
top:35px;
left:29%;
}
.css{
position:absolute;
z-index:10;
color:gray;
font-size:14px;
border:solid thin gray;
padding-left:2px;
padding-right:2px;
top:35px;
left:63%;
}.js{
position:absolute;
z-index:10;
color:gray;
font-size:14px;
border:solid thin gray;
padding-left:2px;
padding-right:2px;
top:35px;
left:92%;
}</style></head><body>
<div class="body"></div>
<br /><button id="button">Click me load the iFame</button>
<div id="html"><html>
<head>
<title>Generated on KBcomp.co</title>
</head>
<body>
<!-- Stick your html here -->
<div class="Yes">
This is all test stuff
</div>
<div id="script">
</div>
</body>
</html>
</div>
<p class="html">html</p>
<div id="css"> *{
margin:0;
padding:0;
}
.yes{
background:black;
padding:10px;
color:white;
}
</div>
<p class="css">css</p>
<div id="js"></div>
<p class="js">javascript</p>
<br />
<iframe id="preview"></iframe>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.6/ace.js'></script>
<script >var html = ace.edit("html");
html.setTheme("ace/theme/eclipse");
html.getSession().setMode("ace/mode/html");
var css = ace.edit("css");
css.setTheme("ace/theme/eclipse");
css.getSession().setMode("ace/mode/css");
var js = ace.edit("js");
js.setTheme("ace/theme/eclipse");
js.getSession().setMode("ace/mode/javascript");
html.getSession().setUseWrapMode(true);
css.getSession().setUseWrapMode(true);
js.getSession().setUseWrapMode(true);
html.on("blur", function(){
var html2 = html.getSession().getValue(); // HTML code
var content = $("#preview").contents().find("body"); // iframe id is 'preview'
content.html(html2);
});
css.on("blur",function(){
var cssStyle = $("#preview").contents().find("head").find("style");
var csVal = css.getSession().getValue();
var cssLink = "<style>" + csVal + "</style>"; // cssVal contains css code
var head = $("#preview").contents().find("head");
cssStyle.text(cssLink);
});
js.on("blur",function(){
var script = $("#preview").contents().find("head").find("script");
var jsCode = js.getSession().getValue();
var jss = jsCode;
script.text(jss);
});
$('#button').click(function() {
var head = $("#preview").contents().find("head");
var html2 = html.getSession().getValue(); // HTML code
var content = $("#preview").contents().find("body"); // iframe id is 'preview'
content.html(html2);
var cssVal = css.getSession().getValue();
var cssLink = "<style>" + cssVal + "</style>"; // cssVal contains css code
head.html(cssLink);
var script = $("#preview").contents().find("#script");
var jsCode = js.getSession().getValue();
var jss ="<script>"+jsCode+"</scr"+"ipt>" ;
script.html(jss);
});
//# sourceURL=pen.js
</script>
</body></html>
