打开新的浏览器窗口/ iframe，并在TEXTAREA中通过HTML创建新文档？ [英] Open a new browser window/iframe and create new document from HTML in TEXTAREA?
问题描述
我正在尝试使用HTML5的新脱机功能来编写Web应用程序。在此应用程序中，我希望能够在< textarea> 中编辑一些HTML（完整文档，而不是片段），按一个按钮，然后填充在< textarea> < iframe> ） $ c>。新内容不会在本地客户端以外的任何地方保留，因此请在 window.open 调用或 src < iframe> 上的属性不起作用。
I'm trying to write a web application using the new offline capabilities of HTML5. In this application, I'd like to be able to edit some HTML—a full document, not a fragment—in a <textarea>, press a button and then populate a new browser window (or <iframe>, haven't decided yet) with the HTML found in the <textarea>. The new content is not persisted anywhere except the local client, so setting the source on the window.open call or the src attribute on an <iframe> is not going to work.
我在StackOverflow上发现了以下问题： 将HTML从当前页面放入新窗口，这使我成为其中的一部分。这项技术似乎可以很好地与片段配合使用，但是我未能成功加载一个全新的HTML文档。奇怪的是，当我在Firebug中查看DOM时，我看到了新的HTML，但它不会呈现。
I found the following question on StackOverflow: "Putting HTML from the current page into a new window", which got me part of the way there. It seems this technique works well with fragments, but I was unsuccessful in getting an entirely new HTML document loaded. The strange thing is when I view the DOM in Firebug, I see the new HTML—it just doesn't render.
是否可以在生成的HTML文档中呈现新窗口或< iframe> ？
Is it possible to render a generated HTML document in a new window or <iframe>?
编辑：这是 我尝试如何完成此操作的示例：
EDIT: Here's a "working" example of how I'm attempting to accomplish this:
<!doctype html>
<html>
<head>
<title>Test new DOM</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
function runonload() {
return $("#newcode")[0].value;
}
$(function() {
$("#runit").click(function() {
w=window.open("");
$(w.document).ready(function() {
$(w.document).html(w.opener.runonload());
});
});
});
</script>
</head>
<body>
<textarea id="newcode">
<!doctype html>
<html>
<head>
<title>New Page Test</title>
</head>
<body>
<h1>Testing 1 2 3</h1>
</body>
</html>
</textarea>
<br/>
<button id="runit">Run it!</button>
</body>
</html>
推荐答案
$(w.document).html(w.opener.runonload());
您不能设置 innerHTML 或，因此，是jQuery的 html（） —在Document对象本身上。
You can't set innerHTML—or, consequently, jQuery's html()—on a Document object itself.
即使可以，也不会不能使用 html（）做到这一点，因为这会在元素的上下文中解析给定的标记（通常是< div> ）来自 current 文档。 doctype声明不适合/无法工作，请将< html> / < body> / etc放在< div> 无效，并且尝试将其从当前ownerDocument创建的元素插入到其他文档中，应该给出WRONG_DOCUMENT_ERR DOMException。 （不过，有些浏览器会让您无法使用它。）
Even if you could, you wouldn't be able to do it using html(), because that parses the given markup in the context of an element (usually <div>) from the current document. The doctype declaration won't fit/work, putting <html>/<body>/etc inside a <div> is invalid, and trying to insert the elements it creates from the current ownerDocument into a different document should give a WRONG_DOCUMENT_ERR DOMException. (Some browsers let you get away with that bit though.)
在这种情况下，老式方法仍然是最好的：
This is a case where the old-school way is still the best:
w= window.open('', '_blank');
w.document.write($('#newcode').val());
w.document.close();
虽然您可以注入 innerHTML 到弹出窗口的 document.documentElement 中，如果这样做，就没有机会设置< ！DOCTYPE> ，这意味着页面陷入了讨厌的旧怪癖模式。
Whilst you can inject innerHTML into a pop-up's document.documentElement, if you do it that way you don't get the chance to set a <!DOCTYPE>, which means the page is stuck in nasty old Quirks Mode.
这篇关于打开新的浏览器窗口/ iframe，并在TEXTAREA中通过HTML创建新文档？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
