1. 首页
  2. 问答
  3. 打开一个新的浏览器窗口/ iframe并在TEXTAREA中从HTML创建新文档？

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

2010-09-07 51 views
3

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

我在StackOverflow上发现了以下问题：“Putting HTML from the current page into a new window”，这让我成为了那里的一部分。看起来这种技术对碎片效果很好，但我没有成功加载全新的HTML文档。奇怪的是，当我在Firebug中查看DOM时，发现它只是不显示新的HTML —。

是否可以在新窗口或者中呈现生成的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>

来源

2010-09-07 technomalogical

回答

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

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

即使你能，你将无法使用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一个弹出如果你这样做，你就没有机会设置<!DOCTYPE>，这意味着页面卡在讨厌的旧古怪模式中。

来源

2010-09-07 14:19:51 bobince

+0

我想出了一个类似的解决方案，但没有意识到我可以立即写出文档（我正在等待新窗口中的空白文档首先加载...愚蠢，我知道）。谢谢你的伟大答案。 – technomalogical 2010-09-07 14:33:53

5

我觉得你这个过于复杂...

试试这个：

<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>

来源

2010-09-07 14:02:35

+0

+1，但稍晚于@bobince。另外，我没有中的我的