Client Side

All the fancy frizz

Create a popunder in JavaScript

Written by: Peter Fisher on October 23, 2012
Tagged under:
Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedIn
Javascript Script Tag

JavaScript – Not to be confused with Java (programming language).

In this post I will demonstrate how to use JavaScript to open a new browser window whilst keeping focus on the original window. This is often referred to as a popunder instead of a popup as the new window is not displayed over the top of the original window. This is very handy for pages that have multiple actions such as downloading and redirecting. However it is often used in web advertising and advert spamming.

As an example a user could click a button which fires off a new browser window,  the header of the page will cause a download to be triggered. Once the headers have been downloaded the new page will close.  Whilst this is going on, the original browser window will be redirecting to a new page.

This is the JavaScript code to create the popunder

var newWindow = window.open('http://www.example.com/my-download','_blank');
newWindow.blur();
window.focus();

Lets look at each line:

In line one we are setting a new open window event to the variable newWindow. This will trigger the new window to open.  The second parameter in the  open event is the target.  In this case its set to _blank which means that the new window will open in a new page.

var newWindow = window.open('http://www.example.com/my-download','_blank');

On the second line we all calling the blur method on the newWindow. This forces the new window to lose its focus. – Thus making the new window hidden from view.

newWindow.blur();

The last line calls the focus event on the original  window object. This keeps the focus on the current window so the user doesn’t notice the second action.

window.focus();

 

Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedIn

Peter Fisher is a web developer working in Gloucester UK. Founder of the digital agency Websomatic, author of this blog and the HowToCodeWell Youtube channel. Peter has over ten years of web development experience under his belt

Read all about Peter Fisher

Leave a Reply

Your email address will not be published. Required fields are marked *