Question

我正在尝试使用HTML5的新离线功能编写Web应用程序。在这个应用程序中，我希望能够编辑一些HTML-一个完整的文档，而不是<textarea>中的片段，按一个按钮，然后填充一个新的浏览器窗口（或<iframe>，尚未决定使用<textarea>中的HTML。除了本地客户端之外，新内容不会保留在任何位置，因此在window.open调用上设置来源或在src上设置<iframe>属性不起作用。

我在StackOverflow上找到了以下问题：“Putting HTML from the current page into a new window”，这让我成为了那里的一部分。看起来这种技术适用于片段，但我没有成功地加载一个全新的HTML文档。奇怪的是当我在Firebug中查看DOM时，我看到了新的HTML - 它只是不呈现。

是否可以在新窗口或<iframe>生成HTML文档？

编辑：以下是我正在尝试完成此操作的“工作”示例：

<!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">
&lt;!doctype html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;New Page Test&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;h1&gt;Testing 1 2 3&lt;/h1&gt;
&lt;/body&gt;
&lt;/html&gt;
</textarea>
<br/>
<button id="runit">Run it!</button>
</body>
</html>

Answer 1

我认为你过于复杂了......

试试这个：

<SCRIPT LANGUAGE="JavaScript">
function displayHTML(form) {
var inf = form.htmlArea.value;
win = window.open(", ", 'popup', 'toolbar = no, status = no'); win.document.write("" + inf + ""); } // </script>
<form>
<textarea name="htmlArea" cols=60 rows=12> </textarea> <br> <input type="button" value=" Preview HTML (New Window)" onclick="displayHTML(this.form)"> </form>

Answer 2

$(w.document).html(w.opener.runonload());

你不能在Document对象本身设置innerHTML - 或者因此jQuery的html()。

即使你可以，你也无法使用html()来完成它，因为它在当前元素的上下文中解析给定的标记（通常是<div>） 文件。 doctype声明不适合/工作，将<html> / <body> / etc置于<div>内无效，并尝试将其创建的元素从当前ownerDocument插入到另一个文档中应该给出一个WRONG_DOCUMENT_ERR DOMException。（有些浏览器可以让你逃脱这一点。）

这是老派的方式仍然是最好的情况：

w= window.open('', '_blank');
w.document.write($('#newcode').val());
w.document.close();

虽然可以将innerHTML注入弹出窗口document.documentElement，但如果你这样做，则无法设置<!DOCTYPE> }，这意味着该页面陷入令人讨厌的旧Quirks模式。

打开一个新的浏览器窗口/ iframe并在TEXTAREA中从HTML创建新文档？

2 个答案: