1. Overview
This document is about to detect multiple browser tabs in oracle apex.
2. Technologies and Tools Used
The following technologies have been used to detect multiple browser tabs.
- Oracle Apex
- JavaScript
3. Use Case
Let us have the requirement to detect multiple browser tabs in oracle apex.
4. Steps with Screenshot
When we convert this requirement into technical specification in your APEX application or page, all you need to do is:
Step 1:
Create a JavaScript file named “noMulTabs.js” as mentioned in below code and add this JS file to your APEX application (Static Application Files).
Code:
/* namespace: noMulTabs */
var noMulTabs = {};
if (noMulTabs === null || typeof (noMulTabs) != “object”) {
noMulTabs = {};
}
/* namespace util under noMulTabs for generic util functions */
if (noMulTabs.util === null || typeof (noMulTabs.util) != “object”) {
noMulTabs.util = {};
}
noMulTabs.util = {
defaults: {
fallbackUrl: “https://apex.oracle.com/”,
alrtMsg: “Multiple Tabs/windows not allowed! Instead, try opening this page using another browser.”,
paraName: “apexSessionTracker”
},
setCookie: function (cookieName, cookieValue) {
document.cookie = cookieName + “=” + cookieValue + “;”;
},
getCookie: function (cookieName) {
var name = cookieName + “=”;
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);
if (c.indexOf(name) == 0) return c.substring(name.length, c.length);
}
return “”;
}
};
noMulTabs.detect = function (pOptions) {
var currSessionId = $(“#pInstance”).val();
settings = $.extend({}, noMulTabs.util.defaults, pOptions);
if (noMulTabs.util.getCookie(settings.paraName) == “” || noMulTabs.util.getCookie(settings.paraName) != currSessionId) {
// Session info not stored in cookie or user opened different session
// store current apex session id in Cookie
noMulTabs.util.setCookie(settings.paraName, currSessionId);
// append current session id to window name
window.name = window.name + “_” + currSessionId;
} else {
// Current Session id already stored in cookie
// check if session id exists in window name. If not exists, that means user is opening new tab/window with same APEX session, using same browser
if (window.name.indexOf(currSessionId) == -1) noMulTabs.redirect(settings.fallbackUrl, settings.alrtMsg);
}
};
noMulTabs.redirect = function (pURL, pMsg) {
// hide page body, to simulate as if page is not loaded
$(“body”).hide();
// alert message to user
alert(pMsg);
// redirect to specified url
window.location.replace(pURL);
};
Step 2:
Create Dynamic Action in Page 0 which executes on “Page Load” event. Add “True” action which executes JavaScript code and put below JS code in code section.
noMulTabs.detect();
If you want to change redirect URL or want to change the alert message, then you can do it using fallbackUrl and alrtMsg parameters. Same code below..
noMulTabs.detect({
fallbackUrl: “http://www.enter-redirect-url.com/”,
alrtMsg: “Your Message goes here..”
});
If you want only some pages in the application to be restricted from opening in multiple tabs, then you can achieve it by specifying “Server-side Condition” for Dynamic Action in Page 0.
Step 3:
Go to Shared Components -> User interface Attributtes -> JavaScript section. Paste the JS file reference as mentioned in below screenshot.
Output:
Tested with Firefox 68.3, Google Chrome 79.0 and Microsoft Edge 44.17763.831.0
APEX versions: 18.2, 19.2
