Spaces:
Sleeping
fix: navbar scripts not executing — innerHTML doesn't run <script> tags
Browse filesROOT 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 +3 -2
- index.html +1 -1
- js/load-navbar.js +23 -0
- link-account.html +2 -2
- live.html +2 -4
- seller-profile.html +1 -1
- shared-wishlist.html +2 -2
|
@@ -40,8 +40,9 @@
|
|
| 40 |
</style>
|
| 41 |
</head>
|
| 42 |
<body>
|
| 43 |
-
<div id="
|
| 44 |
-
<
|
|
|
|
| 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">
|
|
@@ -292,7 +292,7 @@
|
|
| 292 |
<body class="min-h-screen">
|
| 293 |
<!-- Universal Navbar -->
|
| 294 |
<div id="nav-mount"></div>
|
| 295 |
-
<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 -->
|
|
@@ -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 |
+
})();
|
|
@@ -38,8 +38,8 @@
|
|
| 38 |
</style>
|
| 39 |
</head>
|
| 40 |
<body>
|
| 41 |
-
<div id="
|
| 42 |
-
<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">
|
|
@@ -46,12 +46,10 @@
|
|
| 46 |
</style>
|
| 47 |
</head>
|
| 48 |
<body>
|
| 49 |
-
<div id="
|
| 50 |
<script>
|
| 51 |
// Dark-theme header injection
|
| 52 |
-
|
| 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">
|
|
@@ -53,7 +53,7 @@
|
|
| 53 |
<body>
|
| 54 |
<!-- Universal Navbar -->
|
| 55 |
<div id="nav-mount"></div>
|
| 56 |
-
<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">
|
|
@@ -30,8 +30,8 @@
|
|
| 30 |
</style>
|
| 31 |
</head>
|
| 32 |
<body>
|
| 33 |
-
<div id="
|
| 34 |
-
<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">
|