Stop Duplicate Tab : A Simple JavaScript Solution

 

In Oracle APEX, users sometimes open the same page in multiple browser tabs. While it seems harmless, it can create subtle problems:

• Confusion: Which tab has the latest data?
• Redundant sessions: Multiple tabs increase server load.
• Data inconsistencies: Editing the same record in multiple tabs can overwrite changes.

💡 The Solution: Use JavaScript to ensure that only one tab of your application is active at a time.

How It Works Step by Step

1. Track Each Tab with a Unique ID Every tab gets a unique identifier using the timestamp and a random number.
2. Use Browser Storage.
3. Prevent Duplicate Tabs Before opening a new tab, the script checks if the tab already exists. If yes, it alerts the user and closes the new tab.
4. Monitor Active Tab Every second, the script checks if this tab is still the latest active one. If another tab takes over, the user is redirected to the login page.
5. Clean Up on Close When the tab closes or refreshes, the Session Storage entry is removed, allowing a new tab to open safely.

(function() {
  const appId = "&APP_ID.";
  const latestTabKey = "apex_latest_tab_" + appId;
  const currentTabKey = "apex_tab_" + appId;
  const thisTabId = new Date().getTime() + "_" + Math.random();

  if (sessionStorage.getItem(currentTabKey)) {
    alert("Another tab of this application is already open. This tab will close.");
    window.close();
    return;
  }

  sessionStorage.setItem(currentTabKey, thisTabId);
  localStorage.setItem(latestTabKey, thisTabId);

  window.addEventListener("beforeunload", function() {
    sessionStorage.removeItem(currentTabKey);
  });

  setInterval(function() {
    const latestTab = localStorage.getItem(latestTabKey);
    if (latestTab !== thisTabId) {
      alert("This tab is no longer active. Redirecting to login...");
      window.location.href = 'f?p=' + appId + ':LOGIN_DESKTOP:&APP_SESSION.';
    }
  }, 1000);
})(); 

Key Benefits

• ✅ Cleaner and more intuitive user experience
• ✅ Reduced server load and redundant sessions
• ✅ Protected data integrity
• ✅ Frontend-only solution – no backend changes required

Takeaway

Even small UX improvements, like avoiding duplicate tabs, make a big difference in Oracle APEX applications. A lightweight JavaScript approach ensures your app is more professional, safer, and user-friendly.