how to create a fully close window for Exam web app - javascript

I am creating a exam portal and I want to create a window which is full screen so that the chances of malpractices can be reduced. I don't know how to do it

You cannot force full screen permanently on a browser, for somewhat obvious reasons (imagine a spam website abusing it). However, what you can do, is detect a blur event on the window and open another window alerting the user to return to the test.
Just add this javascript:
var myWindow
window.addEventListener("blur", function(){
refocusWindow()
})
window.addEventListener("focus", function(){
myWindow.removeEventListener("blur", refocus)
myWindow.close()
})
function refocusWindow(){
myWindow=window.open("", "myWindow")
myWindow.addEventListener("blur", refocus)
}
function refocus(){
myWindow.close()
setTimeout(function(){
if (document.visibilityState!="visible"){
refocusWindow()
}
},1)
}
Note that the page opened will be blank - you can change it by writing in HTML using myWindow.document.write("HTML code in string format")

Related

Highlight the minimize the browser window

I have create a custom call messenger which is working perfectly fine without any issue.
I need a suggestion for when i minimize the messenger browser window and that time if any call comes in i want to show some kind of indication in terms of pop out that window or highlight.
I have tried window.focus which work if the window is not focus but when it's minimized it's not working.
Is there any other way which way i can show any indication to particular window.
You need to take a look at javascript Notifications for that
Additionaly you could change the document.title or the favicon to indicate that this tab has some notifications like YouTube does it for example with the counter of notifications in the title
The open call returns a reference to the new window. It can be used to manipulate it’s properties, change location and even more.
In this example, we generate popup content from JavaScript:
let newWin = window.open("about:blank", "hello", "width=200,height=200");
newWin.document.write("Hello, world!");
And here we modify the contents after loading:
let newWindow = open('/', 'example', 'width=300,height=300')
newWindow.focus();
alert(newWin.location.href); // (*) about:blank, loading hasn't started yet
newWindow.onload = function() {
let html = `<div style="font-size:30px">Welcome!</div>`;
newWindow.document.body.insertAdjacentHTML('afterbegin', html);
};
Please note: immediately after window.open, the new window isn’t loaded yet. That’s demonstrated by alert in line (*). So we wait for onload to modify it. We could also use DOMContentLoaded handler for newWin.document.

focus only working with alert

I have the following, rather simple function:
function takeFocus() {
setTimeout(function(){window.focus();alert("OK");},1000);
}
This is within the JavaScript of a window I have opened from another window.
When the user re-opens the sub-window, I want to switch to it, and bring it to the front, without reloading it. Calling takeFocus() as above works just fine, but it throws up the prompt, which I don't want.
When I remove the alert, the background window stays in the background! How can I make it work?
I have tried all sorts of ways to do this, and so far I have failed.
jQuery is available. Writing for modern browsers in HTML5.
Is this code in the sub-window file?
Try use the focus in the main page like this:
function newPopup(url) {
popupWindow = window.open(
url,'popUpWindow3','height=500,width=900,left=10,top=10,resizable=yes,scrollbars=yes,toolbar=no,menubar=no,location=no,directories=no,status=no');
popupWindow.focus();
}
I have half an answer. By using this code to open the window, I get the behaviour I need in Chrome. Sadly FireFox 23.01 and IE 10 are still ignoring the win.focus().
function openWin(ID) { // open workshop ID in another window
var URL = '/chatroom.php?ID='+ID;
var name = 'Chat'+ID; // so if you open it twice it reopens the window.
var win = window.open('',name); // no URL - won't refresh
if (win.location == "about:blank") { // new open
win.location.href = URL;
windows[windows.length] = win; // store for later.
}
win.focus();
}
FF and IE open the window OK the first time, and they don't refresh and lose the data on the second pass, but they don't bring it to the foreground either :(

Gray-out the background when popup opens

I call below javascript on click of link/textbox or button.
function OpenPopupLinkRisk(Number)
{
window.open("../PopUp.aspx?id=" + Number, "List", "scrollbars=no,resizable=yes,width=700,height=450");
return false;
}
I donot want user to do anything else until he closes the popup window. So how can I grey background and force user to first close the popup and then do any other activity on application.
Can anyone suggest me how to achieve this ?
Thanks !
First of all, i would really disrecommend using window.open for this unless you really need a new browser popup window. If you want to stick with it persee, then will have to use a timer or something to manually check when the window is closed like:
var popup = window.open('http://www.example.com', 'example', '');
var timer = setInterval(function() {
if(window.closed) {
clearInterval(timer);
alert('Closed alright');
}
}, 100);
Else, check some tutorials on the subject, Modal Popup
First a direct solution to you problem that I wouldn't advice using it an then an approach you should be taking and is better from usability as well as security point of view.
Check whether popup window has closed
// mask your page
mask();
// open popup
var popup = window.open("../PopUp.aspx?id=" + Number);
// check whether it's been closed
function check()
{
if (popup && !popup.closed)
{
setTimeout(check, 1000);
}
// unmask your page
unmask();
}
check();
Modern (and better) alternative
Using window.open is a bad solution because it's a security risk and popup blockers prevent sites to open new windows. It's also considered bad practice.
A much better modern alternative is to display the new page as modal window inside your page directly. This will not open new windows and users stay as they are.
There are tons of javascript plugins for modal windows. Make a Google search.

html open a url on new target and focus

I am trying to fix a web site.
It opens a help page in a new window/tab via <a href="..." target="help"> (no other frame has this name)
This works well the first time opening a new window/tab, for the help.
But on subsequent clicks the window/tab is loaded but remains hidden.
I tried this:
<script>
function OpenAndFocusHelp() {
win=window.open('help/1000CH00017.htm','help');
win.focus();
}
</script>
<a href="help.html" target="help"
onclick="OpenAndFocusHelp()">Help</a>
It did not work!
It seems that modern browsers do not allow you to window.focus an existing window. Or at least, it will not give that window focus. (IE9 will actually blink the tab, but most other browsers merely load it but give no indication that the user's attention should be drawn to the new window.)
Therefore, one solution that presents itself is to close the window first, and then re-open it immediately after. For example, declare the following function:
window.openOrFocus = function(url, name) {
if (!window.popups)
window.popups = {};
if (window.popups[name])
window.popups[name].close();
window.popups[name] = window.open(url, name);
}
Now, you can write HTML such as this:
Window 1<br />
Window 2<br />
Since it closes the window first, it reliably gives focus to the newly created child window.
This solution also uses the window.popups namespace, so rename the usages of that in the javascript sample if you have a function named popups or have otherwise collided with it.
Caveat: This does not work after a post-back. This is because once you navigate away from the current page, it is no longer the owner of the child windows. Therefore, it can no longer close them. However, it merely degrades to the usual (non-focusing) behavior of using the target attribute.
Tested In: Firefox 4, Chrome 11, IE 9
JsFiddle Demo: http://jsfiddle.net/aqxBy/7/
I think this feature is browser-specific and you can't define the behavior for focusing new tabs or windows..
You can have such code instead:
var _arrAllWindows = new Array();
function OpenOrFocus(oLink, sTarget) {
var oWindow = _arrAllWindows[sTarget];
if (!oWindow || oWindow.closed) {
oWindow = window.open(oLink.href, sTarget);
_arrAllWindows[sTarget] = oWindow;
}
oWindow.focus();
return false;
}
Then to call it, have such link:
Open
Works fine in Chrome and IE, unfortunately Firefox disable by default the option to "raise" windows in code so focus() has no effect in that browser - could not find any work around.
Test case is available here: http://jsfiddle.net/yahavbr/eVxJX/
Here's one way using jQuery and HTML5 with fallback for JavaScript-disabled clients. It will reload pages on every click. Tested and works in Firefox and Chrome.
<script>
$(document).ready(function() {
$('a[data-popup]').click(function(event) {
event.preventDefault();
window.open(this.href, this.dataset['popup'], 'resizable,scrollbars').focus();
});
});
</script>
Stack Overflow
Super User
Server Fault

Is it possible to detect if a user has opened a link in a new tab?

If a user is on your website and opens another link (also to your website) in a new tab, is it possible to differentiate this from the user just clicking on the link normally? This can be in javascript, on the server, whatever.
I'm guessing that the answer is that you cannot do this, but I wanted to double check.
You can sort of do it like this:
if (history.length == 1) { // Um, needs to be 0 for IE, 1 for Firefox
// This is a new window or a new tab.
}
There may be other ways for history.length to be 1, but I don't know what they might be.
In addition to history.length in JavaScript you can read/write the window's name.
Thus if you check if it has a name onload... it should be blank on the very first load... if you then set it to "foo"... on each subsequent load in that window... the window.name property will return "foo"... unless you open a link in a new tab/window... that new window should have no name set.
(unless of course you open a popup via window.open(url, name, features); which allows you to pre-set the name)
<script>
if(window.name == ''){
//first load (or Nth load in a new Tab/Window)
if(!SOME_VALUE_SET_FOR_2ND_TO_NTH_LOADS){
//set name so we can catch new Tab/Window
window.name = 'myWinName';
} else {
//we have a new Tab/Window (or something funky)
alert('What?! One window not cool enough for ya?\n' +
'Calling the InterWeb Police!');
}
} else if(window.name == 'myWinName'){
//2nd-Nth load
document.title = 'All is well... we think';
}
</script>
Caveats:
If your page is initially loaded in a window/frame that already had a name... things will get quirky
If your page has (named) iframes and you have any links targeted into those iframes, there is a bug in IE7/8 whereby when the user opens those links in a new tab/window, the new tab/window will "inherit" the name of the iframe that was originally targeted (very ODD bug with no fix ever expected)
This is what I use in ASP.NET MVC to forbid authenticated users to open multiple tabs:
<script language="javascript" type="text/javascript">
#if(Request.IsAuthenticated)
{
<text>
if (window.name != 'singleWindow') {
window.location.href = "Content/ErrorPages/SingleTab.htm";
}
</text>
}
else
{
<text>
window.name = "singleWindow";
</text>
}
</script>
Basically, this sets the window name first time when the user visits the login page. After logging in, for each subsequent page load the window name is tested.
Two problems:
does not wok if JavaScript disabled
if by mistake the user closes the original tab and then pastes some other link to my website in the address bar, the user will always receive the error page. To give the user a chance to recover, I have included "Log out" link in the SingleTab.htm page, so the user can destroy his session cookie and start a new session.
The window.opener property in JavaScript will point to the window that opened the new window. However it doesn't distinguish between a new window and a new tab. Tabs are not part of the official W3C spec so there's no direct support for them.
The short answer is, no. The long answer is, if you are doing an ajaxy call from your pages to server-side methods, that could keep ttrack of the windows open (called within a short timeframe). It would be a sloppy, unreliable mess, and you couldn't differentiate between a new window or a tab for that matter.
I really don't think so. The closest you could get as far as I'm aware of is monitoring keypress and mouseclick events to try to match actions to common methods for opening links in new tabs. (ie. if they're holding Command when they click, or middle-clicked, it's probably a new tab). That wouldn't be reliable though, as any of those bindings can be changed.
It is client behaviour, so I think you could do something with javascript, like check for browser history, but it is ambiguous between a new tab and a new windows.
Beside that, not all browsers has tabs and not all browsers has the same meaning for what a tab is (in some are different process, in some others they aren't).
But, why would you want to check that? It really matter if your application is executing in a new tab or not? I don't think so...
A modern way to detect this is by using
sessionStorage(Docs here)
Your page code could have something like:
const is_new_tab = (sessionStorage.getItem('is_old_tab') != 'true');
sessionStorage.setItem('is_old_tab', 'true');
The reason this works is because sessionStorage is similar to localStorage but is unique per tab. There are cases where it won't be (like if you duplicate a tab, but in that case, sessionStorage is probably doing the right thing anyways).

Categories

Resources