Opening a link in a new window with Javascript and Visualforce

In a recent project we had a link that was opening up in a new tab in the browser, but the client really wanted that link to open up in a new window.  The end user may have become lost if he/she was directed to another page and we did not want the end user to lose his/her current settings on the page.  We were using the standard outputLink Visualforce tag for this that looks like

<apex:outputlink value="" id="theLink" target="_self"></apex:outputlink> 

We tried to set target=“_blank”, but then the browser would get to choose based on its settings whether to open in a new window or in a new tab.  If you are using Firefox that setting would be found by clicking on Tools, Options, clicking on the Tabs tab and checking ‘Open new windows in a new tab instead.’

Since this route was not getting us to our requirement we had to go with more straight Javascript.  The client gave us a good example of how the functionality should work. The client had created a ‘Custom Link’ on their home page to a report.  In creating the custom link the behavior was ‘Display in new window.’  Since this was doing exactly what we wanted our link to do I decided to look at the Javascript that Salesforce was using to see if I could replicate it.  Each browser has its own development tools, but in my case since the client’s browser is IE I decided to look there.  So in IE9 I did the following…

1) Brought up the home page where the link to the report was located
2) Clicked on Tools, F12 developer tools
3) Clicked on the ‘Restore Down’ button so the window would not be maximized
3) Clicked on the HTML tab
4) Clicked on Find, then ‘Select Element by Click’ in the menu
5) I then hovered over the report link and clicked on it.  This brought me to the exact spot of the ‘a href’ tag in the HTML
6) The html looked like this…  ( I right-clicked on the link and selected ‘Copy OuterHTML’ )

<a onblur="self.status=' ';return true;" onfocus="self.status='/servlet/servlet.Integration?lid=00b30000001ufCM&eid=005a0000007pT8Q&ic=1';return true;" onmouseover="self.status='/servlet/servlet.Integration?lid=00b30000001ufCM&eid=005a0000007pT8Q&ic=1';return true;" title="My Special Report (New Window)" onmouseout="self.status=' ';return true;" href="javascript:openIntegration%28%27%2Fservlet%2Fservlet.Integration%3Flid%3D00b30000001ufCM%26eid%3D005a0000007pT8Q%26ic%3D1%27%2C%20%27height%3D600%2Clocation%3Dno%2Cresizable%3Dyes%2Ctoolbar%3Dno%2Cstatus%3Dno%2Cmenubar%3Dno%2Cscrollbars%3D1%27%2C%201%29">My Special Report</a>

7) The part that is doing the actual opening of the link in a new window is in the href section which is calling the openIntegration Javascript method.
8) To find that Javascript method I clicked on the ‘Script’ tab in the ‘F12 developer tools’ window, and then searched for ‘openIntegration’ using the search textbox in the upper right corner.  This is what was there…

function openIntegration(a,b,c){,"_blank",b,!1);

So it was basically using the command with 4 parameters.  The first parameter is the URL to open.  The second parameter is the window name and was “_blank” so we knew that it was going to open in a new tab or window.  The third parameter is the attributes or ‘windowfeatures’ to use when opening that URL.  The last parameter is called replace and it determines how the history list is affected.  Here is a link that describes these options well: Window.Open Syntax

So with our new Javascript we modified our outputLink to look like the following.

<apex:pageblocktable value="{!AvailableItems}" var="a">
           <apex:outputlink value="#" onclick="'/a00?rlid={!linkID}&id={!a.Id}&isdtp=lt','_blank','width=810,height=310,toolbar=0,status=1,scrollbars=1,resizable=yes',!1);">{!a.Link_Text_To_Display__c}</apex:outputlink>

There are a few things to note.
1) The value=“X” attribute helps to keep the current page as is when the new window is opened.
2) The URL that we are opening is a related list.  Each related list has its own unique Salesforce ID per sandbox and production so we had to dynamically set this with {!linkID}
3) &isdtp=lt is Salesforce specific and will remove the Salesforce header and the sidebar from the new window once it opens.

I hope this has given you some ideas on how to incorporate some Javascript in one of your Visualforce pages.

This entry was posted in Technology and tagged , , , . Bookmark the permalink.