Detect if browser has more then 1 tab/window open

Question

So i am developing a quiz web application. And i wanted to add a setting that the administrator of the quiz could set that would make it so the user could only have 1 window/tab open while the quiz is being taken.

The reason for this is to make it so they cant goto like google and google the answer while the quiz window/tab is open. Of course they could always open a different browser and do it that way, but still thought it would be a nice feature to have for them to enable.

Now i dont know if this would fall under a security sandbox violation (and thus not be available at all) but since i only want to detect if another tab or window is open and not get actual information about the tab/window i am hoping that this is someway possible using javascript.

Answer 1

You can't, but a possible workaround would be to use the new HTML5 fullscreen API. You could use a setInterval function to regularly test that document.fullScreen == true to ensure that the user has not toggled off the full screen.

This only works in modern browsers, and it's trivial to work around if the user knows his way around the JS console, but it does seem to fit your requirements.

Note that all fullscreen API implementations are currently vendor-prefixed.

Answer 2

There seems to be viable alternative to the approach described below the line: using Page Visibility API, currently supported by all the modern browsers. This looks like far more reliable than listening for blur. There's one possible way to do it:

// on quiz start
document.addEventListener('visibilitychange', function() {
  if (document.hidden) {
    console.log('Y U hide?');
  }
});

The problem is that visibilitychange event is fired only when page goes from visible to hidden (and vise versa). It still lets user open two browser instances - one with the quiz page, one with any favorite search engine, for example.

---

While you cannot detect the number of tabs open, you can try to check when the user goes away from the quiz page with this trick:

$(function(){
  $(window).blur(function() {
    console.log('I see what you did here!');
  });
});

Sadly, it'll also give you plenty of false positives.