How to inject HTML content into an iframe object using javascript?
<script type="text/javascript">
function submitTryit() {
var t = document.getElementById("textareaCode").value;
var doc = document.getElementById('iframeResult').contentWindow.document;
doc.open();
doc.write(t);
doc.close();
}
</script>
Example:
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Tryit Editor</title>
<meta name="viewport" content="width=device-width">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--[if lt IE 8]>
<style>
.textareacontainer, .iframecontainer {width:48%;}
.textarea, .iframe {height:800px;}
#textareaCode, #iframeResult {height:700px;}
.menu img {display:none;}
</style>
<![endif]-->
<style type="text/css">
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
color: #000000;
margin: 0px;
font-size: 100%;
}
#ads {
background-color: #ffffff;
height: 104px;
width: 100%;
margin-top: 0px;
min-width: 903px;
}
.container {
background-color: #f1f1f1;
width: 100%;
overflow: auto;
position: absolute;
top: 100px;
bottom: 0;
height: auto;
min-height: 250px;
min-width: 550px;
}
.textareacontainer, .iframecontainer {
float: left;
height: 100%;
width: 50%;
}
.textarea, .iframe {
height: 100%;
width: 100%;
padding: 15px;
}
.textarea {
padding-right: 7px;
}
.iframe {
padding-left: 7px;
}
.headerText {
width: auto;
float: left;
font-family: verdana;
font-size: 1em;
line-height: 2;
}
.seeResult {
float: right;
font-size: 15px;
background-color: #555555;
color: #ffffff;
border: 1px solid #555555;
padding: 0 15px;
line-height: 1.45;
width: auto;
cursor: pointer;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.seeResult:hover {
background-color: #ffffff;
color: #000000;
}
.seeResult:active {
background-color: #f1f1f1;
}
.textareawrapper {
width: 100%;
height: 92%;
background-color: #ffffff;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.iframewrapper {
width: 100%;
height: 92%;
-webkit-overflow-scrolling: touch;
background-color: #ffffff;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
#textareaCode {
background-color: #ffffff;
font-family: consolas,"courier new",monospace;
font-size: 15px;
height: 100%;
width: 100%;
padding: 8px;
resize: none;
border: none;
}
#iframeResult, #iframeSource {
background-color: #ffffff;
height: 100%;
width: 100%;
}
.footerText {
position: absolute;
bottom: 0;
font-family: verdana;
font-size: 0.8em;
width: 100%;
padding-right: 15px;
text-align: right;
height: 20px;
overflow: hidden;
}
.footerText a {
color: #000000;
}
.footerText a:hover {
text-decoration: none;
}
#tryitLeaderboard {
overflow: hidden;
text-align: center;
margin-top: 5px;
}
@media screen and (max-width: 768px) {
.container {
top: 100px;
}
.footerText {
display: none;
}
}
@media screen and (max-width: 728px) {
#tryitLeaderboard {
margin-top: 0;
}
.container {
top: 60px;
}
}
@media screen and (max-width: 467px) {
.container {
top: 50px;
}
}
@media only screen and (max-device-width: 768px) {
#textareaCode {
padding: 5px;
}
.iframewrapper {
overflow: auto;
}
.container {
min-width: 320px;
}
.textarea, .iframe {
height: 97%;
}
@media screen and (orientation:portrait) {
.textareacontainer, .iframecontainer {
height: 50%;
float: none;
width: 98%;
}
.textarea, .iframe {
height: 97%;
padding: 15px;
}
}
}
@media screen and (max-height: 700px) {
.footerText {
display: none;
}
}
</style>
<script>
if (window.addEventListener) {
window.addEventListener("resize", browserResize);
} else if (window.attachEvent) {
window.attachEvent("onresize", browserResize);
}
var xbeforeResize = window.innerWidth;
function browserResize() {
var afterResize = window.innerWidth;
if ((xbeforeResize < (970) && afterResize >= (970)) || (xbeforeResize >= (970) && afterResize < (970)) ||
(xbeforeResize < (728) && afterResize >= (728)) || (xbeforeResize >= (728) && afterResize < (728)) ||
(xbeforeResize < (468) && afterResize >= (468)) || (xbeforeResize >= (468) && afterResize < (468))) {
xbeforeResize = afterResize;
googletag.cmd.push(function () {
googletag.pubads().refresh([gptAdSlots[0]]);
});
}
}
</script>
<script type="text/javascript">
function submitTryit() {
var t = document.getElementById("textareaCode").value;
var doc = document.getElementById('iframeResult').contentWindow.document;
doc.open();
doc.write(t);
doc.close();
}
</script>
<style>
</style>
</head>
<body>
<div class="container">
<div class="textareacontainer">
<div class="textarea">
<div style="overflow:auto;">
<div class="headerText">Edit This Code:</div>
<button class="seeResult" type="button" onclick="submitTryit()">See Result »</button>
</div>
<div class="textareawrapper">
<textarea autocomplete="off" class="code_input" id="textareaCode" wrap="logical" spellcheck="false">
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>This is the Test WorkSpace</h1>
</body>
</html>
</textarea>
</div>
</div>
</div>
<div class="iframecontainer">
<div class="iframe">
<div style="overflow:auto;">
<div class="headerText">Result:</div>
</div>
<div class="iframewrapper">
<iframe id="iframeResult" class="result_output" frameborder="0" name="view"></iframe>
</div>
</div>
</div>
<script>submitTryit()</script>
</div>
</body>
</html>
No comments:
Post a Comment