Jak dynamicznie tworzyć stronę HTML w JavaScript

Question

Nov 09, 2013, 04:00 AM

Jak dynamicznie tworzyć stronę HTML w JavaScript

Czy możliwe jest dynamiczne tworzenie pełnej strony HTML w JavaScript?

Zasadniczo tworzę edytor HTMLw przeglądarce i chciałbym mieć kod HTML w górnej części ekranu w obszarze tekstowym, a na dole ekranu podgląd strony HTML. Chodzi o to, że to nie jest tylko mały HTML div i css, będzie to pełna strona HTML, która musi obsługiwać linki do JavaScript i arkuszy stylów CSS.

Na przykład tekst „edytor” zawierałby kod źródłowy pełnej strony HTML takiej jak ta:

<!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>

Następnie poniżej znajduje się podgląd edytora HTML. Byłoby to w rzeczywistości bardzo podobne do edytora StackOverflow, który teraz wpisuję (pod tym załączonym obrazem znajduje się renderowany podgląd).

Chciałbym, aby domeny były oddzielone, tak aby, jeśli podgląd ładuje JS lub CSS, odnosi się on tylko do strony podglądu i jest piaskowany. czy to możliwe?