Vista previa de códigos HTML y CSS en un iframe

Si alguna vez has visto un sitio como JSBin, donde se puede escribir en HTML, CSS y JavaScript, y luego ver los resultados en un panel a la derecha? pues, en este artículo te voy a proporcionar una herramienta que vamos a utilizar, usando jQuery.

Explicación

Vamos a realizar una hoja de estilos como la siguiente: * { margin: 0; padding: 0; } body { font-family: sans-serif; color: white } textarea { width: 100%; margin: 20px auto 50px; height: 200px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; border-color: #999; } .container { background: #bf9000; border-right: 1px solid white; } .grid { width: 50%; float: left; overflow: hidden; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 30px 50px; } .output { border-left: 1px solid #e3e3e3; overflow: hidden; } .output iframe { border: none; width: 100%; } Ahora vamos a necesitar este código html:

 

  
HTML
  

  
CSS
  
 



 

Dónde van incluidas nuestras textareas en dónde serán ingresados los códigos y nuestro iframe que mostrará los resultados.

Y para terminar, vamos a incluir jQuery: <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script> <script src="http://localhost:35729/livereload.js"></script> <script> (function() { $('.grid').height( $(window).height() ); var contents = $('iframe').contents(), body = contents.find('body'), styleTag = $('<style></style>').appendTo(contents.find('head')); $('textarea').keyup(function() { var $this = $(this); if ( $this.attr('id') === 'html') { body.html( $this.val() ); } else { // it had to be css styleTag.text( $this.val() ); } }); })(); </script> Uniendo todos los elementos obtendríamos lo siguiente:

Ejemplo

Introduce algún código html o css cualquiera.

HTML

CSS

Y eso es todo amigos.

Descargar Ejemplo