Target="" is DEPRECATED ?!

I know that frames are deprecated, but I usually don’t use use the “target”-attribute for targetting a frame but for targetting a named window or target=“_blank” in rare cases - weblink listings for example.

And here’s the question: Is there any VALID replacement for targetting a named window or a new blank site using target=“_blank”?

I never use <frames> and mostly I try (successfully) to avoid any deprecated tags or attributes or anything that isn’t allowed regarding to strict dtd and so I don’t want to use transitional type only to target specific windows.

(p.s. I know, there’s already a thread about “target”, but this bb engine wants users to create a new thread if the original thread was created more than 10 months ago!)

The replacement is to let your visitors choose where to open it. The context menu contains three options - open, open in a new tab, and open in a new window. Adding a target effectively removes one of those options and thus reduces your visitors choices.

I’ve actually used JStarget in places for special instances. Basically, if you look at how wikipedia handles its external links, this method does pretty much the same thing.

/*
JSTarget function by Roger Johansson, www.456bereastreet.com
version 1.2
*/
var JSTarget = {
    init: function(att,val,warning) {
        if (document.getElementById && document.createElement && document.appendChild) {
            var strAtt = ((typeof att == 'undefined') || (att == null)) ? 'class' : att;
            var strVal = ((typeof val == 'undefined') || (val == null)) ? 'non-html' : val;
            var strWarning = ((typeof warning == 'undefined') || (warning == null)) ? ' (opens in a new window)' : warning;
            var oWarning;
            var arrLinks = document.getElementsByTagName('a');
            var oLink;
            var oRegExp = new RegExp("(^|\\\\s)" + strVal + "(\\\\s|$)");
            for (var i = 0; i < arrLinks.length; i++) {
                oLink = arrLinks[i];
                if ((strAtt == 'class') && (oRegExp.test(oLink.className)) || (oRegExp.test(oLink.getAttribute(strAtt)))) {
                    oWarning = document.createElement("em");
                    oWarning.appendChild(document.createTextNode(strWarning));
                    oLink.appendChild(oWarning);
                    oLink.onclick = JSTarget.openWin;
                }
            }
            oWarning = null;
        }
    },
    openWin: function(e) {
        var event = (!e) ? window.event : e;
        if (event.shiftKey || event.altKey || event.ctrlKey || event.metaKey) return true;
        else {
            var oWin = window.open(this.getAttribute('href'), '_blank');
            if (oWin) {
                if (oWin.focus) oWin.focus();
                return false;
            }
            oWin = null;
            return true;
        }
    },
    /*
    addEvent function from http://www.quirksmode.org/blog/archives/2005/10/_and_the_winner_1.html
    */
    addEvent: function(obj, type, fn) {
        if (obj.addEventListener)
            obj.addEventListener(type, fn, false);
        else if (obj.attachEvent) {
            obj["e"+type+fn] = fn;
            obj[type+fn] = function() {obj["e"+type+fn]( window.event );}
            obj.attachEvent("on"+type, obj[type+fn]);
        }
    }
};
//--this is the original line
//JSTarget.addEvent(window, 'load', function(){JSTarget.init("rel","external"," (external website, opens in a new window)");});
//--this line excludes the extra text
JSTarget.addEvent(window, 'load', function(){JSTarget.init("rel","external","");});

CSS for showing the “external link” icon next to the link

/* external link icon */
a[rel="external"] {
    background: url(../images/external.png) center right no-repeat;
    padding-right: 13px;
}

The external.png image: http://img257.imageshack.us/img257/3981/externali.png

and example HTML:

<a rel="external" title="Top 5 Offline Backup Tools" href="http://lifehacker.com/5498381/five-best-offline-backup-tools">backup tools</a>

However–there’s a recommendation from the same author for HTML5: http://www.456bereastreet.com/archive/201006/new_windows_with_javascript_and_the_target_attribute/

That seems a bit of overkill for a simple process. See this simpler, but configurable solution.

cheers,

gary

Another trick is to class the link something like popup. Than add an event listener to a top level containing element and detect a click on a item with class popup using event bubbling. When a item with the class of popup is detected open the window using JavaScript and kill the default event. You can even intercept it and change the implementation to load the page in a modal window using JavaScript while maintaining graceful degradation for users with JS turned off. That is a water-downed, basic variant of how I normally handle similar situations.

Or simply switch your doctype to something other than XHTML strict :wink:

I think there’s something fundamentally wrong with the premise in this thread. Strict DOCTYPEs have deprecated the target attribute to deal away with forcing the user to open links in new windows. If you wish to open links in a new window, you can’t use strict DOCTYPEs. Using various Javascript techniques to modify the DOM to include a target attribute after the HTML has loaded might make the site pass the W3C validator, but your DOM will still be invalid for a strict DOCTYPE.

If you really feel you must open links in new windows (for which there can never be an objectively sound reason), then why not use a transitional DOCTYPE, and be honest about not writing strict code?