代码之家 › 专栏 › 技术社区 › Dan Monego

重构一个使用window.open使用DOM而不是write()的函数

web-standards dom javascript

Dan Monego · 技术社区 · 17 年前

我有一个应用程序,它使用 window.open() 以生成动态弹出窗口。不幸的是,我在使用标准DOM函数创建新窗口的内容时遇到了问题( createElement , appendChild ),我已经使用 document.write() 以生成页面。

具体来说,我该如何着手:

function writePopup()
{
    var popup = window.open("", "popup", "height=400px, width=400px");
    var doc = popup.document;
    doc.write("<html>");
    doc.write("<head>");
    doc.write("<title>Written Popup</title>");
    doc.write("</head>");
    doc.write("<body>");
    doc.write("<p>Testing Write</p>");
    doc.write("</body>");
    doc.write("</html>");
    doc.close();
}

使用DOM创建相同弹出窗口的函数?

编辑:我确实考虑过使用绝对定位的元素来模拟弹出窗口,虽然它看起来更好,但用户需要能够打印显示的信息。

6 回复 | 直到 8 年前

Eric Wendelin 17 年前

只需进行快速测试,我就可以让doc将DOM创建的HTML附加到我的弹出窗口中,如下所示:

var popup = window.open("", "popup", "height=400px, width=400px"); 
var doc = popup.document.documentElement;
var p = document.createElement("p"); 
p.innerHTML = "blah"; 
doc.appendChild(p);

我的例子产生了我所知道的完全无效的HTML,但它是有效的(显然测试有限)。

scunliffe 17 年前

一个.innerHTML转储的性能应该比无数行document.write()要好;

我会根据需要构建DOM,并使用

doc.innerHTML = newDOM;

仍然有点老套,但比document.write()好;

bobince 17 年前

我已经使用document.write()来生成页面。

我认为在与DOM交互之前,您可能必须至少使用一些document.write()来放置一个骨架页面:

doc.write('<!DOCTYPE ...><html><head></head><body></body></html>');
doc.close();
doc.body.appendChild(...);

在调用write()之前,新窗口的文档处于不确定状态,还没有文档可以交互。Firefox至少在你第一次调用document.write()之前会放一个临时的骨架文档,但我看不到这实际上在任何地方都有记录,所以最好不要依赖它。

var弹出=窗口打开(“”,“弹出”,“高度=400px,宽度=400px”);

window.open中不需要像素单位。

xlm santhosh reddy 8 年前

为什么不使用库函数,例如 http://plugins.jquery.com/project/modaldialog 而不是重新发明轮子?

[编辑]或

function writePopup(){
    var popup = window.open("", "_blank", "height=400px, width=400px");
    var doc = popup.document;
    doc.title = 'Written Popup';

    var p = doc.createElement('p');
    p.innerHTML = 'Testing Write';
    doc.body.appendChild(p);
}

Wes P 17 年前

是否有可能有另一个生成动态内容的页面,并将其弹出,传递标识您想要生成的内容的参数,而不是尝试写入新窗口?

tmim 15 年前

你可以使用类似的东西

function writePopup(){
  var htmlString=[
    "<html>",
    "<head>",
    "<title>Written popup</title>",
    "</head><body>",
    "<p>Testing write</p>",
    "</body></html>"
  ].join("\n");
  window.open("data:text/html,"+encodeURIComponent(htmlString), "_blank", "height=400px, width=400px");
}

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

1 年前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

1 年前

Alex · 在轻量级中同时解构和不解构变量

1 年前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

1 年前

bairog · 从按属性筛选的对象数组字典中创建值数组

1 年前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

1 年前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

user3472810 · Angular@Output/EventEmitter返回undefined

1 年前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

1 年前