app/static/js/iframe.js

@@ -1,14 +1,21 @@
-// Global variables to store elements and original state
-let mainElement, originalContent, originalMainStyle, container, customScrollbar;
+document.addEventListener("DOMContentLoaded", function () {
+    const links = document.querySelectorAll(".iframe-link");
+    const mainElement = document.querySelector("main");
+    const container = document.querySelector(".container");
+    const customScrollbar = document.getElementById("custom-scrollbar");
 
-// Function to open a URL in an iframe using global variables
-function openIframe(url) {
-    // Set a fixed height for the main element if not already set
+    links.forEach(link => {
+        link.addEventListener("click", function (event) {
+            event.preventDefault(); // Prevent default link behavior
+
+            const url = this.getAttribute("href");
+
+            // Fix the original height of the main element if not already set
             if (!mainElement.style.height) {
                 mainElement.style.height = `${mainElement.clientHeight}px`;
             }
 
-    // Replace the container class with container-fluid if not already applied
+            // Replace the container class with container-fluid
             if (container && !container.classList.contains("container-fluid")) {
                 container.classList.replace("container", "container-fluid");
             }
@@ -18,79 +25,25 @@ function openIframe(url) {
                 customScrollbar.style.display = "none";
             }
 
-    // Check if an iframe already exists in the main element
+            // Check if the iframe already exists
             let iframe = mainElement.querySelector("iframe");
+
             if (!iframe) {
-        // Create a new iframe element
+                // Create a new iframe
                 iframe = document.createElement("iframe");
                 iframe.width = "100%";
                 iframe.style.border = "none";
                 iframe.style.height = mainElement.style.height; // Apply fixed height
-        iframe.style.overflow = "auto"; // Enable internal scrollbar
+                iframe.style.overflow = "auto"; // Enable scrollbar inside iframe
                 iframe.scrolling = "auto"; // Ensure scrollability
-
-        // Clear the main content before appending the iframe
-        mainElement.innerHTML = "";
+                mainElement.innerHTML = ""; // Clear main content
                 mainElement.appendChild(iframe);
             }
 
-    // Set the URL of the iframe
-    iframe.src = url;
-}
-
-document.addEventListener("DOMContentLoaded", function () {
-    // Initialize global variables
-    mainElement = document.querySelector("main");
-    originalContent = mainElement.innerHTML;
-    originalMainStyle = mainElement.getAttribute("style"); // might be null if no inline style exists
-
-    container = document.querySelector(".container");
-    customScrollbar = document.getElementById("custom-scrollbar");
-
-    // Get all links that should open in an iframe
-    const links = document.querySelectorAll(".iframe-link");
-
-    // Add click event listener to each iframe link
-    links.forEach(link => {
-        link.addEventListener("click", function (event) {
-            event.preventDefault(); // Prevent default link behavior
-            const url = this.getAttribute("href");
-            openIframe(url);
+            iframe.src = url; // Load the URL into the iframe
         });
     });
 
-    // Add click event listener to header h1 to restore the original main content and style
-    const headerH1 = document.querySelector("header h1");
-    if (headerH1) {
-        headerH1.style.cursor = "pointer";
-        headerH1.addEventListener("click", function () {
-            // Restore the original content of the main element (removing the iframe)
-            mainElement.innerHTML = originalContent;
-
-            // Restore the original inline style of the main element
-            if (originalMainStyle !== null) {
-                mainElement.setAttribute("style", originalMainStyle);
-            } else {
-                mainElement.removeAttribute("style");
-            }
-
-            // Optionally revert the container class back to "container" if needed
-            if (container && container.classList.contains("container-fluid")) {
-                container.classList.replace("container-fluid", "container");
-            }
-
-            // Optionally show the custom scrollbar again
-            if (customScrollbar) {
-                customScrollbar.style.display = "";
-            }
-
-            // Adjust scroll container height if that function exists
-            if (typeof adjustScrollContainerHeight === "function") {
-                adjustScrollContainerHeight();
-            }
-        });
-    }
-
     // Adjust iframe height on window resize (optional, to keep it responsive)
     window.addEventListener("resize", function () {
         const iframe = mainElement.querySelector("iframe");

app/static/js/modal.js

@@ -45,16 +45,6 @@ function openDynamicPopup(subitem) {
     linkBox.classList.remove('d-none');
     linkHref.href = subitem.url;
     linkHref.innerText = subitem.description || "Open Link";
-    if (subitem.iframe) {
-      linkHref.classList.add('iframe');
-      // Attach an event listener that prevents the default behavior and
-      // opens the URL in an iframe when clicked.
-      linkHref.addEventListener('click', function(event) {
-        event.preventDefault();
-        openIframe(subitem.url);
-        closeAllModals()
-      });
-    }
   } else {
     linkBox.classList.add('d-none');
     linkHref.href = '#';

app/templates/moduls/base.html.j2

@@ -43,7 +43,7 @@
                     <p itemprop="name">{{ company.titel }} <br />
                     {{ company.subtitel }}</p>
                     <span><i class="fa-solid fa-location-dot"></i> {{ company.address.values() | join(", ") }}</span>
-                    <p><a href="{{company.imprint_url}}" class="iframe-link"><i class="fa-solid fa-scale-balanced"></i> Imprint</a></p>
+                    <p><a href="{{company.imprint_url}}"><i class="fa-solid fa-scale-balanced"></i> Imprint</a></p>
                 </div>
             </footer>
         </div>

app/templates/moduls/navigation.html.j2

@@ -26,7 +26,7 @@
             </li>
         {% else %}
             <li>
-                <a class="dropdown-item {% if children.iframe %}iframe-link{% endif %}" href="{{ children.url }}" target="{{ children.target|default('_blank') }}" data-bs-toggle="tooltip" title="{{ children.description }}">
+                <a class="dropdown-item" href="{{ children.url }}" target="{{ children.target|default('_blank') }}" data-bs-toggle="tooltip" title="{{ children.description }}">
                      {{ render_icon_and_name(children) }}
                 </a>
             </li>

test.html

@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Iframe Navigation</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+        }
+        #iframe-container {
+            width: 100%;
+            height: 80vh;
+            border: none;
+        }
+        nav {
+            margin-bottom: 10px;
+        }
+    </style>
+</head>
+<body>
+
+    <nav>
+        <a href="https://www.example.com" class="iframe-link">Beispiel 1</a> |
+        <a href="https://www.wikipedia.org" class="iframe-link">Wikipedia</a> |
+        <a href="https://www.openstreetmap.org" class="iframe-link">OpenStreetMap</a>
+    </nav>
+
+    <main id="main">
+        <p>Hier wird der Inhalt durch ein Iframe ersetzt.</p>
+    </main>
+
+    <script>
+        document.addEventListener("DOMContentLoaded", function () {
+            const links = document.querySelectorAll(".iframe-link");
+            const main = document.getElementById("main");
+
+            links.forEach(link => {
+                link.addEventListener("click", function (event) {
+                    event.preventDefault(); // Verhindert das Standardverhalten
+
+                    const url = this.getAttribute("href");
+
+                    // Prüfe, ob das Iframe bereits existiert
+                    let iframe = document.getElementById("iframe-container");
+
+                    if (!iframe) {
+                        // Neues Iframe erstellen
+                        iframe = document.createElement("iframe");
+                        iframe.id = "iframe-container";
+                        iframe.width = "100%";
+                        iframe.height = "600px";
+                        iframe.style.border = "none";
+                        main.innerHTML = ""; // Inhalt von main löschen
+                        main.appendChild(iframe);
+                    }
+
+                    iframe.src = url; // Lade die URL in das Iframe
+                });
+            });
+        });
+    </script>
+
+</body>
+</html>