1
Since I have to Open the favorite text editor to create HTML page in order to perform CSS and Jscript tests, I decided to create a personal page based on some aspects of third-party sites like "Jsfiddle", very simple code, no, I’m not proud of it. I only did it because it speeds up my development without first having to create the final file(HTML document).
Code
<html>
<head>
<style>
#menu-vertical
{
position: fixed;
z-index: 999;
overflow: hidden;
border-right: 1px dashed silver;
padding: 5px;
height:100%;
float: left;
}
textarea
{
width: 100%;
height: 150px;
border: 3px solid silver;
padding: 5px;
font-family: Tahoma, sans-serif;
background-color: azure;
background-position: bottom right;
background-repeat: no-repeat;
}
input
{
width: 90px;
border: 1px solid gray;
padding: 5px;
}
</style>
<script>
<!--
function pop()
{
var js = document.getElementById("JS").value;
var html = document.getElementById("HTML").value;
var css = document.getElementById("CSS").value;
var janela = window.open("", "janela","width=500px, height=500px, scrollbars=yes");
janela.document.write("<html>\n<head>\n");
janela.document.write("<style>\n"+css+"\n</style>\n");
janela.document.write("</head>\n<body>\n"+html+"\n");
janela.document.write("</body>\n<script>\n"+js+"\n");
janela.document.write("</script>\n</html>");
}
//-->
</script>
</head>
<body>
<!-- Editor Lang.: CSS - HTML - JS -->
<div id="menu-vertical">
<br><b>CSS:</b><br>
<textarea id="CSS" cols="39" rows="9" size="1"></textarea>
<br><b>HTML:</b><br>
<textarea id="HTML" cols="39" rows="9" size="1"></textarea>
<br><b>JScript:</b><br>
<textarea id="JS" cols="39" rows="9" size="1"></textarea>
<center>
<hr color="silver" width="100%" size="1"/>
<input type="button" value="Executar" onclick="pop()"/>
</div>
<!-- Fim -->
</center>
</body>
</html>
Otherwise perfect, now I want to replace the Pop-up Window to iframe
dynamic, I’m just not able to recreate the function variables pop()
for the function pag()
of iframe
.
var js = document.getElementById("JS").value;
var html = document.getElementById("HTML").value;
var css = document.getElementById("CSS").value;
Dynamic iframe
pag = function ()
{
var el = document.createElement('iframe');
el.setAttribute('id','exibir') ;
el.width ="100%";
el.height="100%";
document.body.appendChild(el);
}
I quote something related to this question ..
Diddle - "It is a simplified jsFiddle clone created by nwoike"
Start with the idea of creating a iframe on the page and not a new window.
– Celso Marigo Jr
Diego just to warn had some errors in the response code, now corrected, I hope it helps.
– Guilherme Nascimento
Which browser you want to run, not everything will be possible :/ ... I will try to edit
– Guilherme Nascimento
@Guilherme Nascimento Your answer already pleases me! I won’t have to change it because of this. But knowing otherwise to cover modest browsers, just add another logic below the first answer, if you know, nothing mandatory Okay! As for the Navigator I use a certain variety familiar at least known is why I wish to be portable Firefox2,3.. Ieca rsrs Konqueror
– Diego Henrique
Okay Diego, I was able to test on IE6, too many browsers I don’t know what the effect will be, but I believe it works.
– Guilherme Nascimento
@Guilherme Nascimento Tested on: Konqueror Light, Flock 1.0, Flock 1.5, Firefox 1.0.4, Firefox 1.5.0.6, Firefox 2.0, Opera 8.01, Opera 8.01, Opera 8.25, Opera 8.50, Opera 8.52, Opera 9.10, Opera 9.25, .. finally I think it is better to resort some plugins for this specific case, use the features of the new versions and provide shims or polyfills, that simulate those features. In the other good work, I’m grateful you spent your valuable time helping me. From now on let me.
– Diego Henrique