QR Scanner with html5-qrcode in Wix Custom Element not stopping on page change

I thin this will be the only way, which could work for you —>

Preventing users from leaving the Wix page, either by:

  1. Closing the browser tab/window,
  2. Refreshing the page,
  3. Navigating to another page,
  4. Clicking Wix menu links (SPA navigation).

This can be done with custom code injection via the Wix dashboard, but with some hard limitations imposed by browsers and Wix itself.


1. Add Custom Code in Wix Dashboard

Go to:
Wix Dashboard → Settings → Advanced → Custom Code

  • Add Code → Paste in the <head> or <body - start>
  • Apply to all pages or only specific pages where you want this restriction.

2. Code to Block Leaving the Page

<script>
(function() {
  console.log("[Guard] Navigation prevention script initialized.");

  // --- A) Prevent closing tab, refreshing, or external navigation ---
  window.addEventListener('beforeunload', function(event) {
    event.preventDefault();
    event.returnValue = ''; // Required for Chrome, Firefox, Edge
    return '';              // Required for Safari
  });

  // --- B) Detect and block internal Wix SPA navigation ---
  let lastUrl = location.href;

  setInterval(() => {
    if (location.href !== lastUrl) {
      console.log("[Guard] Internal Wix navigation detected:", location.href);

      // Revert back to the original page immediately
      history.pushState(null, '', lastUrl);

      alert("Navigation is disabled on this page. You cannot leave.");
    }
  }, 200);
})();
</script>

3. What This Code Does

Action Result
Close tab/window Shows browser-native confirmation dialog: “Are you sure you want to leave this page?”
Refresh page (F5 / Ctrl+R) Same dialog appears, blocking refresh
Navigate to external site Same dialog appears
Click Wix menu link (internal SPA navigation) URL is immediately reverted back, and an alert warns the user

This wasn’t written by me, so no guaranties that it will work, but you can try.

Your problem is, there is no real trigger you can use for your purpose, at least i do not see one.

  • User can use the → NAVIGATION-ARROWS / BUTTONS of the browser ← giving your QR-Code-Scanner headaches.

  • User can close the entire BROWSER-WINDOW → what for sure will also let your QR-CODE-SCANNER still nunning.

You do not have much options, but you could take the following into consideration…

  1. onViewportLeave()
  2. WindowFrontEnd-API
  3. Another idea in my mind was to integrate an interval cheking clock-timer, but will surely also not work.
  4. You need somehow to trigger one of those two…

attributeChangedCallback(name, oldValue, newValue) { … }
async disconnectedCallback() { … }

…before anything else happens on the Wixpage → making sure, the scanner gets shut of before user can leave the page.

  • Letting your QR-CODE-SCANNER working in a LIGHBOX (maybe an option, but still no guarantee for success and makes everything even more complicated) .

Your am is to prevent user to be capable to navigate when QR-CODE-SCANNER is running and also to prevent user from closing the page.

-You can monitor the log-out-action
-You can monitor if user closes a lightbox
-You can monitor if user do navigation (using a code running on master-page → INTERVAL-CHECKS)

So find your combination!

Yes, a little bit TRICKY your situation.

EDIT:
Read the following…

…and now i see where you got your BARCODE-SCANNER from —>