Accessible Hyperlinks In ASP.NET

Posted on May 24, 2004 |

Posted in Design

I wonder if there's anyone out there who enjoys pop-ups. Pop-ups have become a nuisance of the same magnitude as spam, except that everyone has learned to tame them. Google has a blocker. MSN has a blocker. WinXP SP2 adds a popup blocker of its own to the Internet Explorer. Both Opera and Mozilla Firefox have built-in pop-up blockers.

Besides being a pain in the neck pop-ups cause a couple of common problems:

They mess up the browser's Back button. Everybody is used to using the Back button. Give it back to them.
They make matters even worse for blind surfers because they might not realize a new window just popped up.

Following are the three most common approaches to opening new windows:

<a href="javascript:window.open (...)"
<a href="..." target="..."
<a href="..." onclick="window.open (...)"

Let's take a closer look at each one an talk about its pros and cons.

javascript:window.open

This one is the worst. Links rendered this way violate accessibility rules. Here's why:

Text-based browsers, such as Lynx, don't support JavaScript so your link is a waste for them.
According to www.thecounter.com 11% of people have JavaScript turned off for one reason or another. Again, to them your link is a waste.
Google, the largest blind user in the world, doesn't index JavaScript and JavaScript-based links. Therefore it won't follow them.
You can't bookmark this link.
You can't open the link in a new window yourself. You're stuck with one choice and once choice only.

I wanted to also list something as an advantage of this approach, but I can't think of one.

target=_something

Not as bad but still not good enough. Reasons?

In the XHTML 1.0 standard the target attribute is deprecated. Therefore your pages will not validate against XHTML Strict. It is guaranteed this attribute will be solid gone in the future. The target attribute is still there in the XHTML Transitional DTD, but you're really indulging yourselves.
The new window still doesn't have history and therefore the Back button is not operational.

onclick=window.open

This one is the lesser evil. Aaron Boodman suggested a really neat solution:

<a href="http://google.com/"
 onclick="window.open(this.href, 'popupwindow', 
'width=400,height=300,scrollbars,resizable'); 
return false;">Link text goes here<a>

The advantages of these links are many:

You can simply follow them.
You can choose to open them in a new window by right-clicking.
You can bookmark them.

Hyperlinks in ASP.NET

To take Aaron's code a step further let's build a simple ASP.NET hyperlink control.

<asp:Hyperlink Runat="server" NavigateUrl="http://google.com/"
onclick="window.open (this.href, 'popupwindow', 
'width=400,height=300,scrollbars,resizable'); 
return false;">Link text goes here<asp:Hyperlink>

You won't see the onclick event in IntelliSense, but don't worry—it'll get rendered fine.

Conclusion

Whichever option you implement remember this much: you are robbing a user of choice! It's up to the user, not the designer, to open a link in a new window. If you absolutely have to use a pop-up window give ample warning.

web standards, accessibility

21 comments

Praphulla
on December 21, 2004

Actually i have been searching for this type of performance better code
I used the same code in a user control.But when i click on the link, its just redirecting to the new page but not getting popped in a new window with the expected window height,width

What might be the problem here

Thanks in advance

Milan Negovan
on December 21, 2004

I can think of only two things: pop-up blocker and disabled JavaScript.

Indrani
on February 14, 2005

Sir,
when we click on the properties of hyperlink, and click on navigate url link, then after selecting a file from the browse button, its taking the path starting with file:///c:\abc.txt ..... some thing like this. when we run the application and click on hyperlink, that particular file is not opening, the reason may be since its not http://...But the problem this problem is in windows XP with SP2, so whats the solutions for that problem, when the option for file:/// is given , it should as well work. Please help me in this matter.
thank you

Milan Negovan
on February 15, 2005

Windows treats protocols (http://, file///, etc) differently. There's always an application registered with each "pluggable protocol". The file:/// protocol gets a whole different treatment than http://. My gut feeling tells me you can't pop up a window with the file:/// protocol.

John Yoder
on February 23, 2005

Great article. I'm a very seasoned programmer but new to the .net world. The window.open option was just what I was looking for!

dwight rau
on November 15, 2005

the original post was very useful, thanks.
this.hlImageNLink.Attributes.Add("onclick","window.open (this.href, 'popupwindow', 'width=700,height=500,scrollbars,resizable');return false;");

Brad Burns
on December 23, 2005

I am a seasoned .NET developer, and still, I have to say that it's insight like this, into the small intricacies that makes blogs like this worth reading and coming back to.

Well done. :)

~Brad

Andres C.
on January 11, 2006

I agree that the article was very insightful, and it also provided me the solution I was looking for.
I should also say that Microsoft should have taken situations like this into account and make it easier to create links that open a new window and where you can control the new window's properties. I would imagine it is a common practice to do this, and doing it through the GUI would make more sense than having to search through the Net for a solution.

Sig Handelman
on March 24, 2006

Thanks very much, this works. I am now trying to communicate from the click back to my code-behind. Any hints on how I should write a routine in the little Jscript inside the ASP of this example.

Jason
on June 30, 2006

If you are using databinding in ASP.NET 2.0, you have to use this syntax or the page won't build.

Apparently you have to use the single tick (') around the navigateUrl for it to work.

Jason
on June 30, 2006

Apparently the code didn't show up. The syntax should look like this (without the spaces):

< asp:Hyperlink ID="hyperlink1" Runat="server" NavigateUrl='< %# Eval("IDField", "~/mypage.aspx?id={0}") % >' onclick="window.open (this.href, 'popupwindow', 'width=400,height=300,scrollbars,resizable'); return false;" Text='< %# Eval("DisplayField") % >' >< /asp:Hyperlink >

Shamaa
on January 10, 2007

Didnt know that about Target. Thanks for the tip. Back to good 'ol coding...

jatin
on April 10, 2007

Respected Sir,

There is problem with the asp.net hyperlink control in windows xp, to click on hyperlink for open any file like doc,pdf,txt , any file should not open so please help and solved this problem.

problem with hyperlink like file///d:/abc.doc not any response

Prashant
on July 4, 2007

There is problem with the asp.net hyperlink control in windows xp, to click on hyperlink for open any file like doc,pdf,txt , any file should not open so please help and solved this problem.

pallavi
on September 6, 2007

i need to open a website in a different window(popupwindow) from a asp.net application not on click of the hyperlink but on page load..on page load the required webpage shud open in the popup window..is it possible to do?
please help me in this matter..

Milan Negovan
on September 6, 2007

You can put the following code in PageLoad:

Page.ClientScript.RegisterStartupScript (
this.GetType (),
"Show popup",
"window.open (...);",
true);

pallavi
on September 8, 2007

thank u milan...its working with some small modifications..
thanx

ThirstyMind
on May 9, 2008

This was a great tip. Thanks. I created a site in asp.net. Wile the popup worked fine in IE, it opened the window within the parent in FF. After this suggestion in both the browsers, it behaves as expected.

Jef Claes
on November 10, 2008

Great article!

Jon
on August 19, 2009

Just what I needed! Thanks!

smd
on October 1, 2009

i need to open new window when i click on a link.but if there is link i dont need a blank popup window to open.behind the name of my column there is the url id..so if there is an url on clicking a new windown opens..if there is no url it shudnt open...pls advice

onclick="window.open (this.href, 'popupwindow',
'left=600,width=500,height=500,scrollbars,resizable');
return false;"
Text='<%# Eval("Name") %>' ToolTip='Click Here'>