複数タブに対応していないシステムを、JavaScriptを使って複数タブ禁止にする方法。
※IEの新規セッションから開いた場合はOK
HTML5のWebStorageを使う。
【動作タイミング】画面load直後、一定周期(250msec位)
【動作内容】タブ単位でタブを閉じるまで記憶してくれるsessionStorage
にタブIDを記憶させ、ブラウザ全体で記憶してくれるlocalStorage
のタブIDと比較して、有効なタブかどうかを判定する。セッションと画面表示内容を一致させるため、タブの有効性は後勝にする。
// ID発番フラグ
var issuedAlready = false;
function forbidMultiTab() {
var TAB_ID = "tabID";
var sesTabID = sessionStorage.getItem(TAB_ID);
var lclTabID = localStorage.getItem(TAB_ID);
var newAction = function() {
var tabID = new Date().getTime();
sessionStorage.setItem(TAB_ID, tabID);
localStorage.setItem(TAB_ID, tabID);
issuedAlready = true;
};
var currentAction = function() {
};
var oldAction = function() {
window.open('about:blank','_self').close();
};
// sessionStorageにタブIDが保存されていないとき
// もしくはIE8対応として、「新しいタブで開く」から開くと、sessionStorageの値がコピーされているので、発番フラグが立っていないとき
if (sesTabID == null || (sesTabID == lclTabID && !issuedAlready)) {
newAction();
// sessionStorageの値とlocalStorageの値が等しいとき
} else if (sesTabID == lclTabID) {
currentAction();
} else {
oldAction();
}
}
$(document).ready(function(){
forbidMultiTab();
setInterval(forbidMultiTab, 250);
}