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="/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<!--content-->
<script src="//ajax.googleapis/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/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?
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./">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<!--content-->
<script src="//ajax.googleapis./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./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?
Share Improve this question edited Nov 13, 2013 at 2:17 1.21 gigawatts asked Nov 9, 2013 at 3:00 1.21 gigawatts1.21 gigawatts 17.9k40 gold badges145 silver badges273 bronze badges 4- 2 You can try to use an iframe see Set content of iframe – megawac Commented Nov 9, 2013 at 3:04
- An iFrame is probably as close as you'll get in a browser. You could create a thick client application using C# or Java. Put a textbox on top and a web browser control on the bottom. Save the content of the textbox as a webpage in a temp directory and load said page into the web browser control. Refresh on save and such. Typical stuff you see in IDE's. – P.Brian.Mackey Commented Nov 9, 2013 at 3:07
- I meant to say this is running in the browser. You would go to this website and the editor would be on top the preview would be on the bottom. – 1.21 gigawatts Commented Nov 9, 2013 at 3:24
- @megawac That link helps. The ments state it doesn't work in IE though. A link on that page points to another answer that does work in IE but the example only shows setting the body content and not a full HTML page. stackoverflow./questions/10418644/… – 1.21 gigawatts Commented Nov 9, 2013 at 3:48
2 Answers
Reset to default 2See https://stackoverflow./a/10433550/1363613 for a trick ive often used when doing background server munications 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.
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.)