javascript - read a seperate tab to check if it's open - javascript

I'm looking for a way to somehow read / check if another browser tab is open before opening the requested tab.
For example:
This is for my traffic exchange site, they just open mysite.com/surf.php and leave it viewing user's submitted sites in a frame. They earn points just for leaving that running.
Now lets say USER A has SURF PAGE A running fine and then opens SURF PAGE B then he has 2 mysite.com/surf.php running and earning double the points everybody else will earn.
What I want to happen is:
USER A has SURF PAGE A running fine and then tries to open SURF PAGE B which will check if another mysite.com/surf.php is already open and if it is to redirect the request for the 2nd surf page to another mysite.com/surf-error.php
So they can only ever have 1 mysite.com/surf.php running at any given time.
How would I go about doing this?

Browser windows on the same domain in the same browser can exchange some information via:
Cookies
Local Storage
Communication with a common server
You can use 1) or 2) to store some information about an active page and refuse to let other pages be active if one is already active.
But, the most reliable way to enforce policies like you are asking about is to use the actual server to enforce it. If users have a login, then code the server to only allow a logged in user to accumulate points for one site at a time.
Other than these options, if you want to enforce it all client-side, you would probably need a browser-plugin that could monitor all open browser windows (which I assume is not practical). You cannot do monitoring of multiple windows opened by the user from plain javascript in a web page.

when you start tracking time for someone set a session variable
session.trackingtime = true
when you check again to start tracking time make sure that value is set to false. When you stop tracking time set the variables to false.

I have done something very similar today. Just update the else if part to do a redirect in your case.
// helper function to set cookies
function setCookie(cname, cvalue, seconds) {
var d = new Date();
d.setTime(d.getTime() + (seconds * 1000));
var expires = "expires="+ d.toUTCString();
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}
// helper function to get a cookie
function getCookie(cname) {
var name = cname + "=";
var decodedCookie = decodeURIComponent(document.cookie);
var ca = decodedCookie.split(';');
for(var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
// Do not allow multiple call center tabs
if (~window.location.hash.indexOf('#admin/callcenter')) {
$(window).on('beforeunload onbeforeunload', function(){
document.cookie = 'ic_window_id=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;';
});
function validateCallCenterTab() {
var win_id_cookie_duration = 10; // in seconds
if (!window.name) {
window.name = Math.random().toString();
}
if (!getCookie('ic_window_id') || window.name === getCookie('ic_window_id')) {
// This means they are using just one tab. Set/clobber the cookie to prolong the tab's validity.
setCookie('ic_window_id', window.name, win_id_cookie_duration);
} else if (getCookie('ic_window_id') !== window.name) {
// this means another browser tab is open, alert them to close the tabs until there is only one remaining
var message = 'You cannot have this website open in multiple tabs. ' +
'Please close them until there is only one remaining. Thanks!';
$('html').html(message);
clearInterval(callCenterInterval);
throw 'Multiple call center tabs error. Program terminating.';
}
}
callCenterInterval = setInterval(validateCallCenterTab, 3000);
}

Related

How to close a progressive web app

Once a pwa is installed a mobile device, how do I close the application like a native app without having the user click the back button multiple times.
I understand it's a bad idea to window.close on a web page but this a pwa on a mobile device.
In Cordova you will use navigator.app.exitApp, this is of course not available on pwa.
This is a solution I created today.
When you click the back button a dialog will request you to just click the back button one more time to actually close the app, or Cancel to go back to the page.
The whole thing uses some manipulation of the history, and it works on Chrome. One could adjust things so that it would work for more browsers. It seems browsers often have slightly different philosophies when it comes to how the history should work in detail.
Therefore, in this example, I have a condition that it does its thing only for Android with Chrome, as you can see in the code.
There is also a condition of fullscreen (my PWA runs in fullscreen) so that this logic will not be used in normal browser (you can test in normal browser by setting testInBrowser = true).
closePWA.js
var testInBrowser = false; // set this to true to test in browser
if ( testInBrowser
||
/Android/i.test(navigator.userAgent)
&& /Chrome/i.test(navigator.userAgent)
&& window.matchMedia('(display-mode: fullscreen)').matches
) {
if (getCookie('closing') == "true") {
setCookie('closing', '', 1);
showCloseDialog();
returnToOriginalPageIfUserCancels();
window.stop();
} else {
history.pushState(null, null);
window.addEventListener('popstate', function () {
setCookie('closing', 'true', 10);
history.go(-(history.length - 2));
})
}
}
function showCloseDialog() {
document.body.style='background-color:#aaa;';
var s = document.createElement('SPAN');
s.style='border-radius:10px;padding:50px 30px 40px 30px;display:table;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;background-color:#fff;font-size:30px;font-family:arial;font-weight:bold;';
s.appendChild(document.createTextNode('Click back button again to close'));
s.appendChild(document.createElement('BR'));
s.appendChild(document.createElement('BR'));
s.appendChild(document.createTextNode('or'));
s.appendChild(document.createElement('BR'));
s.appendChild(document.createElement('BR'));
var b = document.createElement('BUTTON');
b.style='font-size:30px;font-family:arial;background:none!important;border:none;color:blue;font-weight:bold;';
b.innerHTML='Cancel'
b.addEventListener('click',function(){outsideResolve()});
s.appendChild(b);
s.appendChild(document.createElement('BR'));
s.appendChild(document.createElement('BR'));
s.appendChild(document.createTextNode('to go back'));
document.body.appendChild(s);
}
async function returnToOriginalPageIfUserCancels() {
await new Promise(function(resolve) {
outsideResolve = resolve;
});
var steps = history.length - 1;
if (steps==1) steps=0; // takes care of the case when user clicks back on first page
history.go(steps);
}
function setCookie(cname, cvalue, exseconds) {
var d = new Date();
d.setTime(d.getTime() + (exseconds * 1000));
var expires = "expires=" + d.toGMTString();
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}
function getCookie(cname) {
var name = cname + "=";
var decodedCookie = decodeURIComponent(document.cookie);
var ca = decodedCookie.split(';');
for (var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
The script should be added right at the beginning of the body element, or very early in the body. This is important. It will not work if added in header, and it will not work properly if added later on in the body, or at the end of the body.
This should be done in every page of your PWA.
Like this:
<!DOCTYPE html>
<html>
<head>
<title>A page</title>
</head>
<body>
<script src="/script/closePWA.js"></script>
<h3>A page</h3>
Go to another page
</body>
</html>
You can test it here
2020-08-17: Update: It seems that Chrome in newer versions has changed the way the history works. So the code must be adjusted. That's of course typical when not using standard solutions and inventing something like this. It shouldn't be difficult, but it requires some investigation. Hopefully the history functionality in Chrome will stabilize after some time so that this script will not have to be adjusted all the time. Right now when I tested it, it actually works in the Firefox browser.
Demo PWA (You must open in a new window / tab and with Chrome Firefox [see update above] if you want to test in browser.)
This demo is configured with testInBrowser = true so that you can test it in your normal Chrome browser. It will of course not close the browser, but you can see how the history jumps.
If you want to test it in your normal (Chrome) browser it is important that you open it in a new window / tab, because the idea is that there must not be any earlier page in the history.
The real test is to try it in your Android device with Chrome. Open it in your Chrome browser, press the tripple dots menu, select "Add shortcut on homescreen".
When the Progressive Web App is installed, start it and navigate back and forth between page 1 and 2 for a while, and then test the whole thing by pressing the back button of your device.

How to delete the javascript cookies when the session invalidates on its own?

I have declared a cookie in my code which is created after specific function gets successful. I manipulate the cookie based on the method success or failure. Below is the code that I have used to create the cookie,
setCounterOfSuccess : function (c_name,value,days){
var expires='';
if (days){
var date=new Date();
date.setTime( date.getTime() + (days*24*60*60*1000) );
expires='; expires=' + date.toGMTString();
}
document.cookie= c_name + '=' + value + expires + '; path=/';
},
getCounterOfSuccess : function(c_name){
var nameEQ = c_name + '=';
var ca=document.cookie.split(';');
for (var i=0; i<ca.length; i++) {
var c=ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ)===0)
return c.substring(nameEQ.length,c.length);
}
return null;
},
deleteCounterOfSuccess : function (name){
this.setCounterOfSuccess (name,'',-1);
},
I want these to be session cookies. So while setting the value I am setting them as below, I am passing ‘ ’ as last parameter to set them as session cookies.
I assume they will expire when the browser will be closed.
this.setCounterOfSuccess ("counterOfSuccess", Counter, '');
I am also deleting the cookie when I hit the logout button from the website. It looks like below,
logout: function()
{
this.deleteCounterOfSuccess ("counterOfSuccess");
}
So I am handling 2 ways of my how my cookies should get deleted. Now the problem is when I leave my website logged in for some time, it automatically logs out after a certain time period as expected. Which means that the session gets terminated or invalidated on its own. Now in this case if the browser is not closed and if I login again, the cookie is still there. And I don’t want that to happen. I want to have new cookie created at every session so that I can track the session related activities in the same.
Can anyone please advise how can I achieve this? How can I delete this cookie when the session terminates on its own after leaving it alone for a long time?
Thanks a lot.

load an ad (div) just once on first load

I wanted to know how can I have a div that has an ad to load or become visible ONLY the first time you load the page but hide it every time the page is refreshed?
I only have the code to load the div with Jquery but don't know how to hide it after refreshing the page:
$(document).ready(function() {
$(".referralProgram").fadeIn("slow");
});
Use a cookie:
$(document).ready(function() {
if (!readCookie("adSeen")) {
$(".referralProgram").fadeIn("slow");
createCookie("adSeen", "1", 1000);
}
});
function createCookie(name, value, days) {
if (days) {
var date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
var expires = "; expires=" + date.toGMTString();
} else var expires = "";
document.cookie = name + "=" + value + expires + "; path=/";
}
function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for (var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') c = c.substring(1, c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
}
return null;
}
Cookie functions from quirksmode.org.
Edit: Since so many are discussing how to deal with this if cookies are disabled, it should be pointed out that server session implementations rely on either a cookie, or a session identifier in the url. At best, you could only prevent displaying the ad for the same user as long as the session identifier is in the url. Returning to the home page sans session id would re-display the ad. Additionally, a careless implementation (and even some careful implementations) could result in false positives for other users if a user shares a url. localStorage solutions won't work with cookies disabled in most, if not all, browsers.
You'll need a way to keep track of when an ad has been displayed to the user. Set a cookie when the ad is created and check for it before displaying again?
You can use client side persistent storage to flag the user has already seen this. Here are 3 options:
1) Cookies - Set a cookie on the visiting users machine.
2) HTML5 Storage - You can store the flag in browser (HTML5 Only) storage.
3) Server Session - If you are using middleware (PHP, ASP.NET, Java, etc.) you can track via a session variable (this is an abstraction of a cookie and is only as persistent as you create it to be).
I am not sure what your server side implementation is like, but if you are worried about cookies being turned off you could handle this on the server side using session state.

Stop people having my website loaded on multiple tabs

I want users to browse my site from only one tab in their browser. How can this be done? Would I use javascript and cookies?
For example, I have a website: www.example.com - and I want my clients to only be able to visit the site from one single tab in one browser. If they open another tab and load the site (or a subpage of the site) - I want an alert "Can't open multiple instances", and then redirect them to an error page.
Once thing to note - if the user changes the address from www.example.com/action/door/mine.aspx to www.example.com - that should work fine, because the user is in the same (original) tab.
Any help will be appreciated. Thanks in advance.
I've created a simple solution for this. The master page layout creates a tab GUID and stores it in sessionStorage area of the tab. The using an event listener on the storage area I write the tab GUID to the sites localStorage area. The listener then compares the tabs GUID to the one written to site storage and if they differ then it knows more than one tab is open.
So if I have three tabs A,B,C then click something in tab C, tab A and B detect another tab is open and warn user of this. I haven't yet got to fixing it so the last tab used get's notification, work in progress.
Here's the JS I have in master page, plus in the login page I have a localStorage.Clear to clear last tab from previous session.
// multi tab detection
function register_tab_GUID() {
// detect local storage available
if (typeof (Storage) !== "undefined") {
// get (set if not) tab GUID and store in tab session
if (sessionStorage["tabGUID"] == null) sessionStorage["tabGUID"] = tab_GUID();
var guid = sessionStorage["tabGUID"];
// add eventlistener to local storage
window.addEventListener("storage", storage_Handler, false);
// set tab GUID in local storage
localStorage["tabGUID"] = guid;
}
}
function storage_Handler(e) {
// if tabGUID does not match then more than one tab and GUID
if (e.key == 'tabGUID') {
if (e.oldValue != e.newValue) tab_Warning();
}
}
function tab_GUID() {
function s4() {
return Math.floor((1 + Math.random()) * 0x10000)
.toString(16)
.substring(1);
}
return s4() + s4() + '-' + s4() + '-' + s4() + '-' +
s4() + '-' + s4() + s4() + s4();
}
function tab_Warning() {
alert("Another tab is open!");
}
Note: It's IE9+
Hope this helps.
UPDATE - 2020
Client side implementation:
We can make use of Broadcast Channel API which allows communication across browsing contexts (windows, tabs, frames or iframes) provided both contexts are from same origin.
A simple implementation to detect 2nd tab loading the website from the 1st tab:
//in entry point of your app (index.js)
const channel = new BroadcastChannel('tab');
channel.postMessage('another-tab');
// note that listener is added after posting the message
channel.addEventListener('message', (msg) => {
if (msg.data === 'another-tab') {
// message received from 2nd tab
alert('Cannot open multiple instances');
}
});
This doesn't use localStorage or cookies and it even works if 1st tab is offline and 2nd tab is being loaded.
Note: This is not supported in Safari & IE11 yet :(
UPDATE - 2022
From March 2022, it is now officially supported on Safari 🥳
Take a note on its browser compatibility.
However, there's a polyfill available that does the job.
EDIT2:
It's the exact thing which is mentioned at this answer, You need 2 IDs:
One random one
One consistent one (this will be our SSID actually, since you limit tabs of a single browser, it's better to get generated form browser's unique parameters)
You can generate consistent one from browser's user-agent or get it from server-side. store both of them server-side.
Store the random one in window.name property which is tab-specific.
Send a heartbeat every 1~2 seconds to your server containing both consistent ID and random one. if server fails to receive the heartbeat, it cleans up database and de-register dead clients.
on every browser's request, check window.name for the value. if it were missing, check with the server-side whether if the previous tab is closed or not (cleaned from database).
If yes, generate a new pair for client if no, reject them.
Two suggestions on top of my mind:
Server-side (better): provide all your clients, a user name and password. request them on their first visit of your site to enter with their credentials. then on every other request, check for whether user with said credentials is already logged in or not.
Client *
|
|
Server ---> Check whether
Already logged
or not?
______________
| |
yes no
| |
permit reject
them them
Client-side: If you really need a strong check of this, use evercookie to store an already-logged-in cookie on client's machine.
Side-note: Do know that every attempt in client side is not secure at all! client-side should help server-side, it shouldn't be used as the one and only source of security. even evercookies can be deleted so, give my first suggestion a go.
**EDIT:**
Evercookie is really doing a good job at storing most secure zombie cookies ever but since the library itself is a little bit heavy for browsers (storing a cookie takes more than 100ms each time) it's not really recommended for using in real-world web app.
use these instead if you went with server-side solution:
Way around ASP.NET session being shared across multiple tab windows
Kiranvj's answer
Extending rehman_00001's answer to handle the case where you want the alert on the new tabs instead.
const channel = new BroadcastChannel('tab');
let isOriginal = true;
channel.postMessage('another-tab');
// note that listener is added after posting the message
channel.addEventListener('message', (msg) => {
if (msg.data === 'another-tab' && isOriginal) {
// message received from 2nd tab
// reply to all new tabs that the website is already open
channel.postMessage('already-open');
}
if (msg.data === 'already-open') {
isOriginal = false;
// message received from original tab
// replace this with whatever logic you need
alert('Cannot open multiple instances');
}
});
I know this post is pretty old, but in case it helps anybody, I recently looked into basically doing the same thing using localStorage and sessionStorage.
Similar Anthony's answer, it sets an interval to make sure the originating tab keeps the entry fresh, so that if the browser crashes or somehow closes without calling the unload event (included in the comments but not part of the code for testing purposes), then there would just be a short delay before the application would run properly in a new browser window.
Obviously, you would change the "tab is good", "tab is bad" conditions to do whatever logic you want.
Oh, and also, the createGUID method is just a utility to make the session identifier unique... it is from this answer to a previous question (wanted to make sure I wasn't taking credit for that).
https://jsfiddle.net/yex8k2ts/30/
let localStorageTimeout = 15 * 1000; // 15,000 milliseconds = 15 seconds.
let localStorageResetInterval = 10 * 1000; // 10,000 milliseconds = 10 seconds.
let localStorageTabKey = 'test-application-browser-tab';
let sessionStorageGuidKey = 'browser-tab-guid';
function createGUID() {
let guid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
/*eslint-disable*/
let r = Math.random() * 16 | 0,
v = c == 'x' ? r : (r & 0x3 | 0x8);
/*eslint-enable*/
return v.toString(16);
});
return guid;
}
/**
* Compare our tab identifier associated with this session (particular tab)
* with that of one that is in localStorage (the active one for this browser).
* This browser tab is good if any of the following are true:
* 1. There is no localStorage Guid yet (first browser tab).
* 2. The localStorage Guid matches the session Guid. Same tab, refreshed.
* 3. The localStorage timeout period has ended.
*
* If our current session is the correct active one, an interval will continue
* to re-insert the localStorage value with an updated timestamp.
*
* Another thing, that should be done (so you can open a tab within 15 seconds of closing it) would be to do the following (or hook onto an existing onunload method):
* window.onunload = () => {
localStorage.removeItem(localStorageTabKey);
};
*/
function testTab() {
let sessionGuid = sessionStorage.getItem(sessionStorageGuidKey) || createGUID();
let tabObj = JSON.parse(localStorage.getItem(localStorageTabKey)) || null;
sessionStorage.setItem(sessionStorageGuidKey, sessionGuid);
// If no or stale tab object, our session is the winner. If the guid matches, ours is still the winner
if (tabObj === null || (tabObj.timestamp < new Date().getTime() - localStorageTimeout) || tabObj.guid === sessionGuid) {
function setTabObj() {
let newTabObj = {
guid: sessionGuid,
timestamp: new Date().getTime()
};
localStorage.setItem(localStorageTabKey, JSON.stringify(newTabObj));
}
setTabObj();
setInterval(setTabObj, localStorageResetInterval);
return true;
} else {
// An active tab is already open that does not match our session guid.
return false;
}
}
if (testTab()) {
document.getElementById('result').innerHTML = 'tab is good';
} else {
document.getElementById('result').innerHTML = 'tab is bad';
}
window.addEventListener('load', function () {
if (localStorage.getItem('web_browser') == null) {
// new tab
localStorage.setItem('web_browser', 'true');
window.addEventListener('unload', function() {
localStorage.removeItem('web_browser');
})
} else {
// duplicate tab
return;
}
})
Put this script at the beginning of html pages, where you don't want users to duplicate current page or tab.
The same problem (and solution) : https://sites.google.com/site/sarittechworld/track-client-windows
Similar :
http://www.codeproject.com/Articles/35859/Detect-and-prevent-multiple-windows-or-tab-usage-i
The best way to solve this is to have one-time session IDs.
Eg, each page contain a session ID, that is valid for one visit, is unique, and random.
When clicking any one link, it will use & invalidate the session ID, and the new page will have a new session ID.
This will force the user to always browse in the newest window or tab, and also prevents session stealing over the wire.
Any attempt to reuse a old session ID should immediately kill also the active session IDs for that user.
Its also important to store, in the session management system, which pages is accessible from page X. So if page X (with session ID abc) contains links to page 1, 2 and 3, any attempt to visit page 4 with session ID abc, will fail and also kill the session.
This will force the user to always have one single session track, and always follow the logic on the site. Any attempt to go forward, back, using history or log entires, or opening multiple windows or tabs, will fail and logout the user in all windows, tabs and devices.
All this can be completely implemented on server-side, without any client-side logic.
Why do you want to do this?
Could try to do some ugly hacking, but the result would be: There is no way you could completely suppress this behaviour.
This could not be solved by JavaScript, because there is always the possibility that the user has disabled JavaScript in his browser, or allows only a certain subset.
The user could open a new browser, use a different computer, etc. to visit multiple pages at once.
But more important:
Also, your site would be the only site that has this behaviour and for this reason this will confuse everybody which uses your site, because it doesn't work like a web site should work. Everybody who tries to open a second tab will think: "This is odd. This website sucks because it different then websites should be. I will not come again!" ;-)
I wrote this to stop a call center page from being accessed in multiple tabs. It works well and is purely client-side. Just update the else if part to do what you want if it detects a new tab.
// helper function to set cookies
function setCookie(cname, cvalue, seconds) {
var d = new Date();
d.setTime(d.getTime() + (seconds * 1000));
var expires = "expires="+ d.toUTCString();
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}
// helper function to get a cookie
function getCookie(cname) {
var name = cname + "=";
var decodedCookie = decodeURIComponent(document.cookie);
var ca = decodedCookie.split(';');
for(var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
// Do not allow multiple call center tabs
if (~window.location.hash.indexOf('#admin/callcenter')) {
$(window).on('beforeunload onbeforeunload', function(){
document.cookie = 'ic_window_id=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;';
});
function validateCallCenterTab() {
var win_id_cookie_duration = 10; // in seconds
if (!window.name) {
window.name = Math.random().toString();
}
if (!getCookie('ic_window_id') || window.name === getCookie('ic_window_id')) {
// This means they are using just one tab. Set/clobber the cookie to prolong the tab's validity.
setCookie('ic_window_id', window.name, win_id_cookie_duration);
} else if (getCookie('ic_window_id') !== window.name) {
// this means another browser tab is open, alert them to close the tabs until there is only one remaining
var message = 'You cannot have this website open in multiple tabs. ' +
'Please close them until there is only one remaining. Thanks!';
$('html').html(message);
clearInterval(callCenterInterval);
throw 'Multiple call center tabs error. Program terminating.';
}
}
callCenterInterval = setInterval(validateCallCenterTab, 3000);
}

Accessing cookies, hopefully in JavaScript

I am working on a Firefox add-on that will allow users (all of whom are part of a specific group; this add-on is very limited in audience scope) to see the status of their authentication cookie from the status bar. We all have to authenticate to access work-related sites, but we get no warning when the cookie expires, so this causes annoying and sometimes drastic interrupts in work flow. Eventually, this add on will allow us to submit our credentials from the status bar without having to go to do any reloads or redirects, but for now, I just want to see it show the status.
I have been looking at the Mozilla developer pages at nsICookie, nsICookie2, nsICookieManager, etc, and it doesn't make very clear sense how any of it fits into JavaScript or XUL or anything else.
Ideally, I'd just like a way for the JavaScript to go outside of the document and get the cookie string for a domain I specify. If I could do that, it would allow the code to possibly be ported over to other browsers (Safari and Chrome, in particular). But if this must be browser specific, then I would at least like to know the method for checking if the cookie exists in Firefox without any bells and whistles of setting or removing.
Simply put, I want a way to say:
if (cookieExists("sample.com", CookieName)) {
alert("You're signed in!");
} else {
alert('Go sign in, you fool!');
}
What is the easiest/most portable way of doing this (browser-side, of course)?
I have been looking at the Mozilla developer pages at nsICookie, nsICookie2, nsICookieManager, etc, and it doesn't make very clear sense how any of it fits into javascript or XUL or anything else.
access to all cookies from Firefox extension is possible and uses the nsICookieManager and nsICookie interfaces. From javascript code in your extension, you access the cookie manager with
var cookieManager = Components.classes["#mozilla.org/cookiemanager;1"].getService(Components.interfaces.nsICookieManager);
and than you can iterate through all stored cookies
var enum = cookieManager.enumerator;
while (enum.hasMoreElements()){
var cookie = enum.getNext();
if (cookie instanceof Components.interfaces.nsICookie){
// commands
}
}
now, when having reference to cookie object you can check its properties
cookie.host
cookie.name
cookie.value
...
defined in nsICookie interface. This code is Firefox specific and can be run as a browser extension or signed script. Hope my explanation helped a bit.
Below I present some links on using JS XPCOM interfaces in extensions:
JS XPCOM
Using cookies
you can use jquery plugin for cookie handling
http://www.stilbuero.de/2006/09/17/cookie-plugin-for-jquery/
or simply through javascript :
http://www.quirksmode.org/js/cookies.html
Here's a nice tutorial for working with cookies in javascript. Using the functions from that tutorial, you could probably do something like this:
if readCookie(yourCookieName != "") {
alert("You're signed in!");
else {
alert("Go sign in, you fool!");
}
Here are the cookie functions:
function readCookie(name) {
var ca = document.cookie.split(';');
var nameEQ = name + "=";
for(var i=0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1, c.length); //delete spaces
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
}
return "";
}
function createCookie(name, value, days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else var expires = "";
document.cookie = name+"="+value+expires+"; path=/";
}
function eraseCookie(name) {
createCookie(name, "", -1);
}

Categories

Resources