Using Javascript to detect new window or application

Jun 08, 2020

I posted this on this thread as well but hoping it gets a bit more visibility here.

The issue is to do with how video/audio behaves if you open a new browser tab versus a new browser window or simply switching to a different application.

So as things stand today if you open a new browser tab, video/audio is paused, as you'd want.

If you open a new/different window, the video/audio continues. All good.

I have an assessment slide with video where I have disabled the video controls because I don't want learners to be able to pause.

As posted on the above thread, I'm using the below code to detect if a learner opens a new tab:

 

--

Use a JS trigger on the slide master

window.addEventListener('blur', function(){
var player = GetPlayer();
player.SetVar("AudioPlay", "False");
}
, false);

window.addEventListener('focus', function(){
var player = GetPlayer();
player.SetVar("AudioPlay", "True");
}
, false);

--

I have another variable called "NavigationCount" which I add one to when AudioPlay changes. That way if the count changes, I can warn learners that they shouldn't do that or even exit the course on the LMS if the count gets to a certain number.

However, the code would also add to the count if a learner views a different application, which I don't mind them doing as it doesn't pause the video. My understanding is that the Javascript is looking at the blur and focus attributes to determine whether or not the browser tab is active - are there other attributes I could use to determine whether someone has left the application or opened a new browser window? The browser/Storyline can clearly do it because the video play behaviour is different depending on whether I open a new tab or navigate to a new/different window.

4 Replies
Dave Cox

Hi Christina,

I'm not completely sure what you are asking for, but I'll attempt to answer your question.

If the browser is not in focus, then the browser tab cannot be in focus either. So if a user switches away from the browser, then the tab will loose focus. I don't believe that there is a method in Javascript that distinguishes between the tab and the entire browser loosing focus, assuming this is what you are asking for.

Dave

Christina Clark

Thanks for the reply, Dave. Yes, I guess the browser losing focus is what I'm after. My assumption was that, because the behaviour of video is different depending on whether you open a new tab or a new window (either a new browser window or switch focus to a different application), that I might be able to use Javascript to only influence my Storyline triggers when a new tab is opened, but not a new / different window.

Christina Clark

Thanks again, Dave.

I'm making this too complicated - all I actually want is for the video not to pause when the learner navigates to a different browser tab. So I can use the code above to know that the tab is not in focus so all I need to do is add a trigger to storyline to resume the timeline when the tab is not in focus. Or so I thought I just tried it and it doesn't work, so it seems that I just can't override the browser's default behaviour.

:-(

This discussion is closed. You can start a new discussion or contact Articulate Support.