How to create an HTML page dynamically in JavaScript
Question
Is it possible to create a full HTML page dynamically in JavaScript?
Basically, I'm creating an HTML editor in the browser and what I would like to do is have HTML code in the top of the screen in a text area and in the bottom of the screen a preview of the HTML page. The thing is it is not merely small HTML div and css, it will be a full HTML page that needs to support links to JavaScript includes and CSS stylesheets.
So, for example, the textarea "editor" would contain the source code of a full HTML page like this:
<!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>
Then below it would sit the preview of the HTML editor. It would be, in fact, very similar to the StackOverflow editor I'm typing in now (there is a rendered preview directly below this - attaching image).
I would like to keep the domains separate so that if the preview loads JS or CSS it only applies to the preview page and is sandboxed. Is this possible?
2 answers
solution1
2 2013-11-12 22:04:24
See https://stackoverflow.com/a/10433550/1363613 for a trick ive often used when doing background server communications back in days prior to AJAX kicked in.
Try creating an IFrame Element, setting a bogus src, append the IFrame to your current Document and then start writing to it (via iframeEl.document.write).
You need to take into account, that the IFrame document may get closed due to some other external event like timeouts or malformed html etc. So perform the writes in the same javascript function/closure to be sure.
The technique basically opens an text -input-stream which you may write to via document.write. In turn, a normal loading webpage retreives its source through a websocket -input-stream.
solution2
1 2013-11-09 03:29:21
The closest you can get is an iFrame. You could do other things with c++, c+, c, java, or even python.
What you should ahve done first however, is googled it. Here is a result that I found for you. CLICK ME! (also a possible duplicate.)
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.