What's the best way to write a standards compliant popup window with XHTML and Javascript?

Question

I'm writing standards compliant XHTML Strict 1.0, so including the HTML "target" attribute on anchor elements will not do.

I've read 2 fundamentally different ways using Javascript:

1. Upon document load, find all links with rel='external' and append the target='_blank' attribute.

2. Use the HTML onClick attribute that fires a Javascript popup(this) function, which opens windows with window.open().

These methods are now 5-6 years old, so I'm hoping things have solidified since then. What's the best way to do this?

Answer 1

There is no new way of doing this, so what you already have found is what there is.

The first method is kind of cheating. You are using Javascript to put non-standard markup in the page after it has loaded, just so that the initially loaded markup will be valid. Once the script has run, the code isn't valid any more.

The second method seems better also from another perspective. The links will work as intended instantly when the page loads, compared to the first method that will not change the links until after all content on the page has loaded. If a user is quick and clicks a link before the last image has been loaded, you still want it to go to a new window.

Answer 2

With JQuery and Iframes (or an object instead)

Answer 3

Full-blown pop-up windows are often blocked by modern browsers.

If you want a nice, cross-platform way to create nice light-weight "pop-up" windows (actually they share their parent window) then maybe use a JavaScript widget library like ExtJs.

Here's how I create my "Help" popups in my JavaScript app.

// Loads help for just one window, i.e. non-tabbed.
function helpShow (help_filename, help_title) {
    if (! help_filename) { return; }

    var help_url = '/edit/help/' + help_filename + '.html';
    if (help_window == null) {
        help_window = new Ext.Window ({
            title: help_title,
            autoLoad: help_url,
            autoScroll: true,
            closeAction: 'hide',
            width: 460,
            height: 600,
            items: new Ext.Panel ()
        });
    }
    help_window.setVisible (true);
}

Some CCS makes them prettier too.