Javascript 打开一个新的浏览器窗口/iframe并在TEXTAREA中从HTML创建新文档?
我正在尝试使用HTML5新的离线功能编写一个web应用程序。在这个应用程序中,我希望能够编辑一些HTML—一个完整的文档,而不是Javascript 打开一个新的浏览器窗口/iframe并在TEXTAREA中从HTML创建新文档?,javascript,html,dom,Javascript,Html,Dom,我正在尝试使用HTML5新的离线功能编写一个web应用程序。在这个应用程序中,我希望能够编辑一些HTML—一个完整的文档,而不是中的片段,按下一个按钮,然后用中找到的HTML填充一个新的浏览器窗口(或,尚未决定)。新内容不会保留在本地客户端以外的任何位置,因此在窗口上设置源代码。在调用中打开src属性将无法工作 我在StackOverflow上发现了以下问题:“,这让我走了一段路。这项技术似乎可以很好地处理片段,但我没有成功地加载一个全新的HTML文档。奇怪的是,当我在Firebug中查看DOM
中的片段,按下一个按钮,然后用
中找到的HTML填充一个新的浏览器窗口(或
,尚未决定)。新内容不会保留在本地客户端以外的任何位置,因此在窗口上设置源代码。在
调用中打开src
属性将无法工作
我在StackOverflow上发现了以下问题:“,这让我走了一段路。这项技术似乎可以很好地处理片段,但我没有成功地加载一个全新的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">
<!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>
测试新DOM
函数runonload(){
返回$(“#newcode”)[0]。值;
}
$(函数(){
$(“#运行它”)。单击(函数(){
w=窗口。打开(“”);
$(w.document).ready(函数(){
$(w.document).html(w.opener.runonload());
});
});
});
!doctype html
html
头
标题新页测试/标题
/头
身体
H11 2 3/h1测试
/身体
/html
快跑!
我想你把这件事复杂化了
试试这个:
<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>
函数显示HTML(表单){
var inf=form.htmlArea.value;
win=window.open(“,”,“popup”,“toolbar=no,status=no”);win.document.write(“+inf+”);}//
不能在文档对象本身上设置innerHTML
,也不能因此设置jQuery的html()
即使可以,您也无法使用html()
,因为这将在当前文档的元素上下文(通常是
)中解析给定的标记。doctype声明不适合/不起作用,将
/
/etc放在
中是无效的,尝试将它从当前所有者文档创建的元素插入到其他文档中会产生错误的\u document\u ERR dome异常。(不过,有些浏览器可以让你摆脱这一点。)
在这种情况下,老派的方式仍然是最好的:
w= window.open('', '_blank');
w.document.write($('#newcode').val());
w.document.close();
虽然您可以将innerHTML
注入弹出窗口的文档.documentElement
,但如果这样做,您就没有机会设置
,这意味着页面陷入了令人讨厌的旧怪癖模式。我提出了类似的解决方案,但没有意识到我可以立即写出文档(我在等待新窗口中的空白文件先载入……愚蠢,我知道)。谢谢你的回答。+1,但比@bobince晚了一点。此外,我没有在a中输入我的,因为单击按钮会提交表单并导致页面刷新,这导致源页面上的脚本停止。事后看来,最好的方法是将该脚本留在那里,并从单击处理程序返回false到pr事件从冒泡开始。稍后?从这里的时间戳看像第一个!+1。@技术:通常最好取消表单中的表单提交。onsubmit
,要在所有情况下停止按Enter键提交表单。@bobince:谢谢表单。onsubmit提示。关于时间戳,我编辑了我的原始评论,现在声明你给出了一个更彻底的答案:)我希望我能给你们两个答案!简单问题的简单答案;)heheI在学习jQuery之后开始学习DOM和香草JavaScript,因为我不知道document.write。看来我需要回去学习一些“老派”的技巧!你说得对,有时候最简单的就是最好的。
w= window.open('', '_blank');
w.document.write($('#newcode').val());
w.document.close();