Search code examples
javascriptdomweb-standards

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.

Solution

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