Cómo crear una página HTML dinámicamente en JavaScript

Question

Nov 09, 2013, 04:00 AM

Cómo crear una página HTML dinámicamente en JavaScript

¿Es posible crear una página HTML completa dinámicamente en JavaScript?

Básicamente, estoy creando un editor de HTML.en el navegador y lo que me gustaría hacer es tener un código HTML en la parte superior de la pantalla en un área de texto y en la parte inferior de la pantalla una vista previa de la página HTML. La cuestión es que no es simplemente una pequeña división de HTML y CSS, sino que será una página HTML completa que debe admitir enlaces a JavaScript y hojas de estilo CSS.

Así, por ejemplo, el "editor" de área de texto contendría el código fuente de una página HTML completa como esta:

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->

        <link rel="stylesheet" href="css/normalize.css">
        <link rel="stylesheet" href="css/main.css">
        <script src="js/vendor/modernizr-2.6.2.min.js"></script>
    </head>
    <body>
        <!--[if lt IE 7]>
            <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->

        <!--content-->

        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.10.2.min.js"><\/script>')</script>
        <script src="js/plugins.js"></script>
        <script src="js/main.js"></script>

        <!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
        <script>
            (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
            function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
            e=o.createElement(i);r=o.getElementsByTagName(i)[0];
            e.src='//www.google-analytics.com/analytics.js';
            r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
            ga('create','UA-XXXXX-X');ga('send','pageview');
        </script>
    </body>
</html>

Luego debajo se ubicaría la vista previa del editor HTML. Sería, de hecho, muy similar al editor de StackOverflow que estoy escribiendo ahora (hay una vista previa renderizada directamente debajo de este - imagen adjunta).

Me gustaría mantener los dominios separados para que, si la vista previa carga JS o CSS, solo se aplique a la página de vista previa y se encuentre en un espacio aislado. es posible?