SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Addict
    Join Date
    Jun 2005
    Posts
    313
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Open link destination in new browser window

    Hi everyone,

    I've created a link but need the destination page to open in a new browser window. I know that I can use the target attribute but apparently this has been deprecated from Xhtml strict.

    Can anyone tell me what the alternative to this is?

    Appreciate any help.

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,319
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    JavaScript is the way to go. It only requires a simple script. If it is written well, the link will open normally if JavaScript is disabled.

    You can also use jQuery. See this link for example (which is really designed for external links):
    http://trevordavis.net/blog/tutorial...-a-new-window/

  3. #3
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    One alternative is to use javascript to open "nofollow" links in new windows:
    Code HTML4Strict:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Unobtrusive Javascript to Open External Links in New Windows</title>
    <meta name="generator" content="PSPad editor, www.pspad.com">
     
    <script type="text/javascript">
    // Of course this would be an external script!
    function relNofollow(){
        var links = document.getElementsByTagName('a');
        for (var i=0; i < links.length; i++){
            var link = links[i];
            if (link.getAttribute('href') && link.getAttribute('rel') == 'nofollow'){
                link.title = "Opens in a new window";
                link.onclick = function(){
                    window.open(this.href);
                    return false;
                }
            }
        }
    }
    window.onload = relNofollow;
    </script>
     
    </head><body >
     
    <p>Using unobtrusive javascript to open all "nofollow" attributed <a rel="nofollow" href="#">external</a> links in a new window but not <a href="#">internal</a> links.</p>
     
    </body></html>
    Happy ADD/ADHD with Asperger's

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,319
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    Very nice Erik. It's easily adaptable to links without nofollow, and is progressive enhancement at its best.

  5. #5
    Is Still Alive silver trophybronze trophy RetroNetro's Avatar
    Join Date
    Jul 2003
    Location
    Texas
    Posts
    6,883
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

  6. #6
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,869
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Remembering of course that yourvisitors have final control over where links open. For example I have my browser set to always open links from the same site in the same window/tab and links to different sites in a new tab regardless of what the web page recommends.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  7. #7
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,319
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by felgall View Post
    Remembering of course that yourvisitors have final control over where links open.
    Yes, it's just as well that visitors have the final say. I often open links in a new tab because I don't want to lose my place. The only reason I've ever wanted to know how to set links to open in a new window was because clients often insist on it, despite the trend away from this for usability reasons.

  8. #8
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,869
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by ralph.m View Post
    was because clients often insist on it, despite the trend away from this for usability reasons.
    The trend away from it means that the HTML way of doing it has been deprecated (ie flagged as obsolete) for the last 10 years.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  9. #9
    SitePoint Addict
    Join Date
    Jun 2005
    Posts
    313
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the info guys

  10. #10
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,319
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by felgall View Post
    The trend away from it means that the HTML way of doing it has been deprecated (ie flagged as obsolete) for the last 10 years.
    Yes, I realize that, and for good reason. I had a long argument over a recent site on this issue. The clients just didn't want to know about usability testing and all the rest--hence I had to find a solution to keep them happy that didn't use deprecated code. I guess it's like a patient not accepting the doctor's advice. It must drive doctors crazy.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •