Develop Reference

How to stop Webpage from coming out of fullscreen in React?

I'm trying to create an online exam portal, Here in the exam window, I want My users to force into fullscreen, and not get out of it until the exam is complete.
I've used the Fullscreen API here to achieve the Fullscreen.
goFullScreen = () => {
if(document.documentElement.requestFullscreen) {
document.documentElement.requestFullscreen(); // W3C spec
}
else if (document.documentElement.mozRequestFullScreen) {
document.documentElement.mozRequestFullScreen(); // Firefox
}
else if (document.documentElement.webkitRequestFullscreen) {
document.documentElement.webkitRequestFullscreen(); // Safari
}
else if(document.documentElement.msRequestFullscreen) {
document.documentElement.msRequestFullscreen(); // IE/Edge
}
}
I've basically copied the code from W3schools.
I want to know how to prevent them to get out of fullscreen? I can return false on 'Esc' Keypress, but there are other ways. Also, I don't want them to open developer window (i.e the console).
What methods should I approach ??
P.S. I'm using React, if that matters.

You cannot prevent exit from fullscreen until you make an electron app or you have access to their computer.
Something which you want to do is against the privacy of the user. You can catch the esc key but, you cannot override the browser. You can do one thing, catch the esc key and end the test if the esc key is pressed.
(I used JQuery, you can use vanilla JS also)
if(document.fullscreenEnabled) {
// browser is almost certainly fullscreen
//Execute end test code here
}
Request to accept if this answer helps...

Is there a way to tell if a browser is active?

On my site I have an important notification that prompts a native alert() in order to bring the site to the foreground if the window is not already focused. The problem is that on some browsers, if the user is in another desktop application (Photoshop, Microsoft Word, etc), it will not bring the browser on top of that application. In this case the alert is pretty much useless and I would like to omit it (since it blocks the other scripts on my page).
Is there a way to tell that a browser is the active application on a device? Or is there a different, non-blocking way to bring a window to the foreground?
Thanks!
Clarifications:
I already know how to check if a window is active within a browser, but I just don't know how to check if the browser application itself is active.
Also, browsers I need to support are Chrome, Safari, Firefox, and IE >= 9

You can use the Page Visibility API for this.
It is compatible with IE 10+.
Small example of code:
document.addEventListener("visibilitychange", function(e) {
console.log("visibility changed!", e);
if (document.visibilityState === 'visible') {
console.info("window is visible now!");
}
else {
console.info("something else, maybe you changed tab or minimized window!");
}
console.log("check the visibilityState property on document object for more info");
});
This will work even if the user minimizes the browser while the tab is open, so I guess this suits your needs :)

You should use the new Notification object. It works even when the browser is not focused, and is useful for sending the user important notifications.
Example: http://jsfiddle.net/howderek/792km8td/
document.getElementById('notif').onclick = function () {
function notify () {
var notification = new Notification('Test!');
}
if (Notification.permission === "granted") {
setTimeout(notify, 5000);
} else {
Notification.requestPermission(function () {
if (Notification.permission === "granted") {
setTimeout(notify, 5000);
}
});
}
}
https://developer.mozilla.org/en-US/docs/Web/API/notification

Have a global variable storing whether the window is active or not:
var window_active = true;
Now add event listeners to "listen" for window (de)activation:
window.onblur = function () {
window_active = false;
};
window.onfocus = function () {
window_active = true;
};
And when you call the alert function, check that global variable:
if (window_active)
alert("notification");
I want to mention that if you change the tab or click the url-bar, the window will be deactivated, which might be not what you want.

How do I communicate back and forth with a popped up window

In my web page I use this function to show a small pop up Window
function popup (url)
{
poppedUpWindow= window.open(url, "PopupWindow", "width=400,height=300");
poppedUpWindow.focus();
return false;
}
I need to share objects between thoos 2 windows.
I tried doing something like this but it does now work
poppedUpWindow.document.documentElement.addEventListener("load", foo, false);
Is also possible that I do something like this
function popup (url)
{
poppedUpWindow= window.open(url, "PopupWindow", "width=400,height=300");
var tmp = poppedUpWindow.document;
tmp.write('<html><head><title>popup</title>');
....
tmp.close();
poppedUpWindow.focus();
return false;
}
But this approach will make solving the problem much harder.
So how should I transfer information from the parent window to the popped up window and vice versa?

From the documentation for postMessage:
Send a message like this:
otherWindow.postMessage(message, targetOrigin);
otherWindow can listen for dispatched messages by executing the following JavaScript:
window.addEventListener("message", receiveMessage, false);
function receiveMessage(event)
{
if (event.origin !== "http://example.org:8080")
return;
// ...
}
Keep in mind browser support: http://caniuse.com/#feat=x-doc-messaging
IE 8+, Firefox 3+, Chrome all versions, Opera 9.5+, Safari 4+

Here is how I solved the issue for anyone else facing the same issue.
I am considering the browser to be either chrome or firefox. I did not test other browsers. The event "load" in Chrome sometimes gets fired before the whole javascript files loads.
function popup (url)
{
poppedUpWindow= window.open(url, "PopupWindow", "width=400,height=300");
poppedUpWindow.focus();
if(is_chrome)
{
window.setTimeout("doSomething()",300); //this value could vary! 300ms seemed fine to me!
}
else
{
fenster.addEventListener('load', doSomething, true); // FireFox
}
return false;
}
function doSomething()
{
poppedUpWindow.postMessage("hi","*");
var a = poppedUpWindow.document.getElementById("b");
// do anything you want..
}
In the other html there should be this method
function receiveMessage(event)
{
if (event.origin !== stringUrlOfFirstWebPage)
{
return;
}
event.source.postMessage("hey!",event.origin);//talking back to the first web page
}

touchEnd and onMouseUp BOTH firing from iPad

I'm building a page that will be used on laptops and iPads. So, the majority of the code (it's drag/drop heavy) is duplicated across mouse events and touch events. But now I'm finding a really strange behavior: when used on a laptop, everything is fine, but when used on an iPad, periodically the touchEnd fires mouseUp...and because the overall goal of the page is a sequence of events, this throws the whole thing off track (step 'n' was achieved, but then the mouseUp function re-tests for it, and since it's already done, that fails)
It took quite awhile to figure that out (since I didn't think it was possible) but by putting unique log message in the different versions, I can see that in my logs on the iPad, I get a 'mouse mistake' message.
Because this cross event behavior isn't logical to me I'm not sure how to continue debugging, so would appreciate whatever advice anyone can give. Here are the primary pieces of code, followed by a sample log FROM THE IPAD. Thanks again.
function touchEnd(event)
{
console.log('touchEnd fired\n');
if (_dragElement != null)
{
if((ExtractNumber(_dragElement.style.left)<-30)&&(ExtractNumber(_dragElement.style.top)<200)&&(event.touches.length==0)){
console.log(_dragElement.id+' in hand\n');
if(process[correct].indexOf(_dragElement.id)>=0){
console.log('--CORRECT--\n');
hide(_dragElement.id);
//hide('hand');
correct++;
document.getElementById('speech').innerHTML=phrases[correct];
_dragElement = null;
return false;
}
else{
console.log('--WRONG--\n');
document.getElementById(_dragElement.id).style.top = document.getElementById(_dragElement.id).defaultTop+'px';
document.getElementById(_dragElement.id).style.left = document.getElementById(_dragElement.id).defaultLeft+'px';
mistakeCounter++;
if(mistakeCounter==10){
console.log('ejection\n');
ejection();
}
else if(mistakeCounter==9){
document.getElementById('speech').innerHTML='If you do that again I\'ll have to ask you to leave';
console.log('warning text\n');
}
else if(mistakeCounter<9&&mistakeCounter>5){
document.getElementById('speech').innerHTML=bigMistakes[Math.floor(Math.random()*bigMistakes.length)];
console.log('big mistake text\n');
}
else{
document.getElementById('speech').innerHTML=mistakes[Math.floor(Math.random()*mistakes.length)];
console.log('mistake text\n');
}
_dragElement = null;
}
}
}
//interactions();
}
function OnMouseUp(e)
{
if (_dragElement != null)
{
_dragElement.style.zIndex = _oldZIndex;
document.onmousemove = null;
document.onselectstart = null;
_dragElement.ondragstart = null;
_dragElement = null;
for(i=0;i<tools.length;i++){
if((ExtractNumber(document.getElementById(tools[i].id).style.left)<-30)&&(ExtractNumber(document.getElementById(tools[i].id).style.top)<200)&&(ExtractNumber(document.getElementById(tools[i].id).style.top)>-800)&&(ExtractNumber(document.getElementById(tools[i].id).style.left)>-800)){
if(process[correct].indexOf(tools[i].id)>=0){
hide(tools[i].id);
//hide('hand');
correct++;
document.getElementById('speech').innerHTML=phrases[correct];
}
else{
document.getElementById(tools[i].id).style.top = document.getElementById(tools[i].id).defaultTop+'px';
document.getElementById(tools[i].id).style.left = document.getElementById(tools[i].id).defaultLeft+'px';
mistakeCounter++;
if(mistakeCounter==10){
console.log('mouse ejection\n');
ejection();
}
else if(mistakeCounter==9){
console.log('mouse warning text\n');
document.getElementById('speech').innerHTML='If you do that again I\'ll have to ask you to leave';
}
else if(9>mistakeCounter&&mistakeCounter>5){
console.log('mouse big mistake text\n');
document.getElementById('speech').innerHTML=bigMistakes[Math.floor(Math.random()*bigMistakes.length)];
}
else{
console.log('mouse mistake text\n');
document.getElementById('speech').innerHTML=mistakes[Math.floor(Math.random()*mistakes.length)];
}
}
}
}
}
//check positions
//interactions();
}
log:
touchEnd fired
safetyAwl in hand
--CORRECT--
touchEnd fired
curvedProbe in hand
--CORRECT--
touchEnd fired
tap55 in hand
--CORRECT--
mouse mistake text

No need to add device specific conditions to handle this.
If the browser fires both touch and mouse events because of a single user input and if you want to stop firing mouse events, call preventDefault() inside touchevent handler to avoid mouse events.
function process_touchend(e) {
// Call preventDefault() to prevent any further handling
e.preventDefault();
}

I 'solved' this by changing the first OnMouseUp if statement to test whether it was an iOS device:
if ((_dragElement != null)&&(!navigator.userAgent.match('iPad'))&&(!navigator.userAgent.match('iPhone'‌​)))
and while that works, it still seems strange to me that it tries to fire so I'm skeptical that is the BEST answer

Firefox 4 onBeforeUnload custom message

In Firefox 3, I was able to write a custom confirmation popup with:
window.onbeforeunload = function() {
if (someCondition) {
return 'Your stream will be turned off';
}
}
Now in Firefox 4, it does not show my custom message. The default message that it provides is not even accurate to what my application does.
Can this default message be overridden?

From MDN:
Note that in Firefox 4 and later the returned string is not displayed to the user. See Bug 588292.
This "Bug" is actually a (imho questionable) feature.. so there's no way to display the message in Firefox 4. If you think it should be changed, comment on that bug so the Firefox developers will know that people actually want to be able to show a custom string.

Addition to the above Answer, I have improved the workaround.
I have used jquery here. you can use default javascript funciton as well.
$(window).bind('beforeunload', function() {
if(/Firefox[\/\s](\d+)/.test(navigator.userAgent) && new Number(RegExp.$1) >= 4) {
if(confirm("Are you Sure do you want to leave?")) {
history.go();
} else {
window.setTimeout(function() {
window.stop();
}, 1);
}
} else {
return "Are you Sure do you want to leave?";
}
});
Tested and working in firefox 11 as well. :)

My workaround is to show alert in onbeforeunload:
window.onbeforeunload=function() {
if ( /Firefox[\/\s](\d+)/.test(navigator.userAgent) && new Number(RegExp.$1) >= 4) {
alert("Blah blah. You have to confirm you are leaving this page in the next dialogue.");
}
return "Blah blah.";
}
(It shows two dialogues in Firefox, one dialogue elsewhere.)

Try implementing it with a confirm message,
window.onbeforeunload=function(){
return confirm("Are you sure??");
}
of course when the user confirms then the FF4 message is shown,
so you maybe better display this once per site on login/visit.
A cookie should do the trick.