如何在 JavaScript 中动态创建 HTML 页面
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19871886/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to create an HTML page dynamically in JavaScript
提问by 1.21 gigawatts
Is it possible to create a full HTML page dynamically in JavaScript?
是否可以在 JavaScript 中动态创建完整的 HTML 页面？
Basically, I'm creating an HTML editor in the browserand 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.
基本上，我正在浏览器中创建一个 HTML 编辑器，我想要做的是在屏幕顶部的文本区域中有 HTML 代码，在屏幕底部有 HTML 页面的预览。问题是它不仅仅是小的 HTML div 和 css，它将是一个完整的 HTML 页面，需要支持 JavaScript 包含和 CSS 样式表的链接。
So, for example, the textarea "editor" would contain the source code of a full HTML page like this:
因此，例如，文本区域“编辑器”将包含完整 HTML 页面的源代码，如下所示：
<!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).
然后在它下面是 HTML 编辑器的预览。事实上，它与我现在正在输入的 StackOverflow 编辑器非常相似（在此正下方有一个渲染预览 - 附加图像）。
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?
我想将域分开，以便如果预览加载 JS 或 CSS，它仅适用于预览页面并被沙盒化。这可能吗？
回答by mschr
See https://stackoverflow.com/a/10433550/1363613for a trick ive often used when doing background server communications back in days prior to AJAX kicked in.
请参阅https://stackoverflow.com/a/10433550/1363613，了解在 AJAX 启动前几天进行后台服务器通信时经常使用的技巧。
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).
尝试创建一个 IFrame 元素，设置一个虚假的 src，将 IFrame 附加到您当前的文档，然后开始写入它（通过 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.
您需要考虑到，IFrame 文档可能会由于其他一些外部事件（例如超时或格式错误的 html 等）而关闭。因此，请确保在同一 javascript 函数/闭包中执行写入。
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.
该技术基本上打开一个文本输入流，您可以通过 document.write 写入该流。反过来，正常加载网页通过websocket-input-stream检索其源。
回答by Progo
The closest you can get is an iFrame. You could do other things with c++, c+, c, java, or even python.
最接近的是 iFrame。你可以用 c++、c+、c、java 甚至 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.)
然而，你应该先做的是谷歌搜索。这是我为您找到的结果。点击我！（也可能是重复的。）
