Z User commited on
Commit
2b4bf9b
·
1 Parent(s): 8fad92c

fix: navbar scripts not executing — innerHTML doesn't run <script> tags

Browse files

ROOT CAUSE: When HTML is injected via element.innerHTML = htmlString, the browser
does NOT execute any <script> tags inside it. This is a security feature.

The navbar was loaded via:
fetch('shared/navbar.html').then(r => r.text()).then(h => {
document.getElementById('nav-mount').innerHTML = h;
});

The navbar HTML contains a <script> that calls EdgeFunctions.auth.checkSession()
and EdgeFunctions.cart.count() to update the auth state and cart count. Since
the script never executed, the navbar never knew if the user was logged in,
and the cart count was always 0.

FIX: Created js/load-navbar.js which:
1. Fetches shared/navbar.html
2. Sets innerHTML (which injects the HTML but doesn't run scripts)
3. Extracts all <script> tags from the injected HTML
4. Creates new <script> elements and replaces the old ones (this DOES execute them)

Updated all pages that load the navbar to use <script src='js/load-navbar.js'>
instead of the inline fetch+innerHTML pattern.

group-buy.html CHANGED
@@ -40,8 +40,9 @@
40
  </style>
41
  </head>
42
  <body>
43
- <div id="header-mount"></div>
44
- <script>fetch('shared/header.html').then(r=>r.text()).then(h=>document.getElementById('header-mount').innerHTML=h);</script>
 
45
 
46
  <div class="gb-hero">
47
  <div class="max-w-3xl mx-auto text-center">
 
40
  </style>
41
  </head>
42
  <body>
43
+ <div id="nav-mount"></div>
44
+ <div id="nav-mount"></div>
45
+ <script src="js/load-navbar.js"></script>
46
 
47
  <div class="gb-hero">
48
  <div class="max-w-3xl mx-auto text-center">
index.html CHANGED
@@ -292,7 +292,7 @@
292
  <body class="min-h-screen">
293
  <!-- Universal Navbar -->
294
  <div id="nav-mount"></div>
295
- <script>fetch('shared/navbar.html').then(r=>r.text()).then(h=>{document.getElementById('nav-mount').innerHTML=h;});</script>
296
 
297
 
298
  <!-- Main Content -->
 
292
  <body class="min-h-screen">
293
  <!-- Universal Navbar -->
294
  <div id="nav-mount"></div>
295
+ <script src="js/load-navbar.js"></script>
296
 
297
 
298
  <!-- Main Content -->
js/load-navbar.js ADDED
@@ -0,0 +1,23 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ // Cellex Navbar Loader — properly executes scripts inside injected HTML
2
+ // Usage: <div id="nav-mount"></div>
3
+ // <script src="js/load-navbar.js"></script>
4
+ (function() {
5
+ fetch('shared/navbar.html')
6
+ .then(r => r.text())
7
+ .then(html => {
8
+ const mount = document.getElementById('nav-mount');
9
+ if (!mount) return;
10
+ mount.innerHTML = html;
11
+ // Extract and execute all <script> tags inside the injected HTML
12
+ // (innerHTML doesn't execute scripts — this is a browser security feature)
13
+ mount.querySelectorAll('script').forEach(oldScript => {
14
+ const newScript = document.createElement('script');
15
+ if (oldScript.src) {
16
+ newScript.src = oldScript.src;
17
+ } else {
18
+ newScript.textContent = oldScript.textContent;
19
+ }
20
+ oldScript.parentNode.replaceChild(newScript, oldScript);
21
+ });
22
+ });
23
+ })();
link-account.html CHANGED
@@ -38,8 +38,8 @@
38
  </style>
39
  </head>
40
  <body>
41
- <div id="header-mount"></div>
42
- <script>fetch('shared/header.html').then(r=>r.text()).then(h=>document.getElementById('header-mount').innerHTML=h);</script>
43
 
44
  <div class="la-card">
45
  <h1 class="text-2xl font-bold mb-2">
 
38
  </style>
39
  </head>
40
  <body>
41
+ <div id="nav-mount"></div>
42
+ <script src="js/load-navbar.js"></script>
43
 
44
  <div class="la-card">
45
  <h1 class="text-2xl font-bold mb-2">
live.html CHANGED
@@ -46,12 +46,10 @@
46
  </style>
47
  </head>
48
  <body>
49
- <div id="header-mount"></div>
50
  <script>
51
  // Dark-theme header injection
52
- fetch('shared/header.html').then(r => r.text()).then(h => {
53
- document.getElementById('header-mount').innerHTML = h;
54
- });
55
  </script>
56
 
57
  <div class="live-hero">
 
46
  </style>
47
  </head>
48
  <body>
49
+ <div id="nav-mount"></div>
50
  <script>
51
  // Dark-theme header injection
52
+ <script src="js/load-navbar.js"></script>
 
 
53
  </script>
54
 
55
  <div class="live-hero">
seller-profile.html CHANGED
@@ -53,7 +53,7 @@
53
  <body>
54
  <!-- Universal Navbar -->
55
  <div id="nav-mount"></div>
56
- <script>fetch('shared/navbar.html').then(r=>r.text()).then(h=>{document.getElementById('nav-mount').innerHTML=h;});</script>
57
 
58
  <!-- Seller Profile -->
59
  <main class="max-w-4xl mx-auto px-4 py-6 pb-20 md:pb-6">
 
53
  <body>
54
  <!-- Universal Navbar -->
55
  <div id="nav-mount"></div>
56
+ <script src="js/load-navbar.js"></script>
57
 
58
  <!-- Seller Profile -->
59
  <main class="max-w-4xl mx-auto px-4 py-6 pb-20 md:pb-6">
shared-wishlist.html CHANGED
@@ -30,8 +30,8 @@
30
  </style>
31
  </head>
32
  <body>
33
- <div id="header-mount"></div>
34
- <script>fetch('shared/header.html').then(r=>r.text()).then(h=>document.getElementById('header-mount').innerHTML=h);</script>
35
 
36
  <div class="sw-hero">
37
  <div class="max-w-5xl mx-auto">
 
30
  </style>
31
  </head>
32
  <body>
33
+ <div id="nav-mount"></div>
34
+ <script src="js/load-navbar.js"></script>
35
 
36
  <div class="sw-hero">
37
  <div class="max-w-5xl mx-auto">