Refactoring a function that uses window.open to use the DOM rather than write()

问题

I have an application that uses window.open() to generate dynamic popups. Unfortunately, I've had trouble creating the content of the new windows using the standard DOM functions (createElement, appendChild), and I've gone to using document.write() to generate the page.

Concretely, how can I go from this:

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();
}

To a function that creates the same popup using the DOM?

Edit: I did consider using an absolutely positioned element to simulate a popup, and though it looks better, the users need to be able to print the information being shown.

回答1:

Why not use a library function such as http://plugins.jquery.com/project/modaldialog instead of reinventing the wheel?

[EDIT] OR

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);
}

回答2:

Just doing quick tests, I can get doc to append DOM created HTML to my popup like so:

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

My example produces totally invalid HTML I know, but it works (with limited testing obviously).

回答3:

One dump of .innerHTML should perform better than a zillion lines of document.write();

I would build up the DOM as needed and dump in using

doc.innerHTML = newDOM;

Still kind of hacky, but better than document.write();

回答4:

I've gone to using document.write() to generate the page.

I think you will probably have to use at least some document.write(), to put a skeleton page in place before you can interact with the DOM:

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

Before write() has been called, a new window's document is in an indeterminate state, there is no document yet to interact with. Firefox at least puts a temporary skeleton document in until you first call document.write(), but I can't see that this is actually documented anywhere so it's probably best not relied upon.

var popup = window.open("", "popup", "height=400px, width=400px");

No ‘px’ unit needed in window.open.

回答5:

Would it be possible to have another page that generates the dynamic content, and pop it open, passing arguments that identify the content you want generated, instead of trying to write to a new window?

回答6:

you could use something like

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");
}

来源：https://stackoverflow.com/questions/265398/refactoring-a-function-that-uses-window-open-to-use-the-dom-rather-than-write

标签

javascript

dom

web-standards