Frage zu iframe

nemessis

Hallo,

wir verwenden auf vielen Seiten das iFrame-Widget mit externen Inhalten.

Während der Bearbeitung lädt ZETA Producer das iFrame bereits in der Live-Vorschau. Dadurch entstehen bei der normalen Pflege unserer Webseiten sehr viele Aufrufe auf dem externen Server, was dort zu einer automatischen IP-Sperre führt.

Gibt es eine Möglichkeit, das Laden von iFrames während der Bearbeitung bzw. in der Live-Vorschau zu deaktivieren oder stattdessen nur einen Platzhalter anzuzeigen, sodass das iFrame erst auf der veröffentlichten Website geladen wird?

Vielen Dank!

Stefan S

Nein, eine solche Möglichkeit gibt es nicht.

nemessis

ok Danke muss ich eine andere Lösung suchen..

aws

Bin nicht 100% sicher ob es funktioniert
Gehe auf die Seite, die das iFrame-Widget enthält.

Füge ein neues Widget vom Typ Quelltext hinzu.
Füge den kompletten Code dort ein

.zp-preview-iframe-placeholder p {
margin: 0 0 5px 0;
font-size: 16px;
font-weight: bold;
color: #007bff;
}

.zp-preview-iframe-placeholder span {
font-size: 13px;
color: #666666;
}

/* Steuerung über JavaScript-Klasse */
body.is-zeta-preview .zp-preview-iframe-placeholder {
display: flex;
}

body.is-zeta-preview iframe.preview-blocked {
display: none !important;
}
</style>

iframes.forEach(function(iframe) {
const src = iframe.getAttribute("src");

if (src && (src.startsWith("http://") src.startsWith("https://")) && !iframe.classList.contains("preview-blocked")) {
const placeholder = document.createElement("div");
placeholder.className = "zp-preview-iframe-placeholder";
placeholder.innerHTML = `
<div>
<p>🔄 iFrame-Vorschau blockiert</p>
<span>Wird erst nach dem Veröffentlichen geladen.</span>
</div>
`;

iframe.parentNode.insertBefore(placeholder, iframe);

iframe.setAttribute("data-original-src", src);
iframe.setAttribute("src", "about:blank");
iframe.classList.add("preview-blocked");
}
});
}
}

if (document.readyState === "loading") {
document.addEventListener("DOMContentLoaded", blockPreviewIframes);
} else {
blockPreviewIframes();
}
})();
</script>

Der Code blockiert in der lokalen Zeta-Vorschau das automatische Laden externer iFrames und zeigt stattdessen einen statischen Platzhalter an. Dadurch werden massenhafte Server-Aufrufe während der Bearbeitung verhindert, während auf der veröffentlichten Website alles wie gewohnt lädt.

Ungetestet, versuche es einfach mal

Grüße
Armin /AWS)

aws

Seltsamerweise interpretiert das System hier die beiden senkrechten Striche (Doppelstriche), das logische "ODER" in JavaScript, als Emoji
Entweder die Emojis gegen die Doppelstriche tauschen oder diesen Code verwenden. Der umgeht dies
<style>
/* Einfaches Basis-Styling für den Platzhalter */
.zp-preview-iframe-placeholder {
display: none;
width: 100%;
height: 350px;
background-color: #f8f9fa;
border: 2px dashed #007bff;
border-radius: 6px;
align-items: center;
justify-content: center;
text-align: center;
padding: 20px;
box-sizing: border-box;
font-family: sans-serif;
color: #333333;
margin: 15px 0;
}

.zp-preview-iframe-placeholder p {
margin: 0 0 5px 0;
font-size: 16px;
font-weight: bold;
color: #007bff;
}

.zp-preview-iframe-placeholder span {
font-size: 13px;
color: #666666;
}

/* Steuerung über JavaScript-Klasse */
body.is-zeta-preview .zp-preview-iframe-placeholder {
display: flex;
}

body.is-zeta-preview iframe.preview-blocked {
display: none !important;
}
</style>

iframes.forEach(function(iframe) {
const src = iframe.getAttribute("src");

if (src && !iframe.classList.contains("preview-blocked")) {
// Umgehung des Forum-Emoji-Bugs: Prüft http:// und https:// ohne die "||"-Striche
const protocols = ["http://", "https://"];
const isExternal = protocols.some(function(proto) { return src.startsWith(proto); });

if (isExternal) {
const placeholder = document.createElement("div");
placeholder.className = "zp-preview-iframe-placeholder";
placeholder.innerHTML = `
<div>
<p>🔄 iFrame-Vorschau blockiert</p>
<span>Wird erst nach dem Veröffentlichen geladen.</span>
</div>
`;

iframe.parentNode.insertBefore(placeholder, iframe);

iframe.setAttribute("data-original-src", src);
iframe.setAttribute("src", "about:blank");
iframe.classList.add("preview-blocked");
}
}
});
}
}

if (document.readyState === "loading") {
document.addEventListener("DOMContentLoaded", blockPreviewIframes);
} else {
blockPreviewIframes();
}
})();
</script>

phil-web

aws Du musst den Code hier in einen Code-Block einfügen, damit die Forensoftware die Zeichen nicht in Emojis umwandelt. Das findest du unter den drei Punkten rechts und dann das Dokument mit "<>" Zeichen.

aws

Danke Phil. Man lernt nie aus 👋

nemessis

ok - danke erstmal...

nemessis

Zitat von aws

Seltsamerweise interpretiert das System hier die beiden senkrechten Striche (Doppelstriche), das logische "ODER" in JavaScript, als Emoji
Entweder die Emojis gegen die Doppelstriche tauschen oder diesen Code verwenden. Der umgeht dies
<style>
/* Einfaches Basis-Styling für den Platzhalter */
.zp-preview-iframe-placeholder {
display: none;
width: 100%;
height: 350px;
background-color: #f8f9fa;
border: 2px dashed #007bff;
border-radius: 6px;
align-items: center;
justify-content: center;
text-align: center;
padding: 20px;
box-sizing: border-box;
font-family: sans-serif;
color: #333333;
margin: 15px 0;
}
.zp-preview-iframe-placeholder p {
margin: 0 0 5px 0;
font-size: 16px;
font-weight: bold;
color: #007bff;
}
.zp-preview-iframe-placeholder span {
font-size: 13px;
color: #666666;
}
/* Steuerung über JavaScript-Klasse */
body.is-zeta-preview .zp-preview-iframe-placeholder {
display: flex;
}

body.is-zeta-preview iframe.preview-blocked {
display: none !important;
}
</style>
<script>
(function() {
function blockPreviewIframes() {
const isLocalhost = window.location.hostname === "localhost" window.location.hostname === "127.0.0.1";
const isLocalFile = window.location.protocol === "file:";

if (isLocalhost isLocalFile) {
document.body.classList.add("is-zeta-preview");
const iframes = document.querySelectorAll("iframe");
iframes.forEach(function(iframe) {
const src = iframe.getAttribute("src");

if (src && !iframe.classList.contains("preview-blocked")) {
// Umgehung des Forum-Emoji-Bugs: Prüft http:// und https:// ohne die "||"-Striche
const protocols = ["http://", "https://"];
const isExternal = protocols.some(function(proto) { return src.startsWith(proto); });
if (isExternal) {
const placeholder = document.createElement("div");
placeholder.className = "zp-preview-iframe-placeholder";
placeholder.innerHTML = `
<div>
<p>🔄 iFrame-Vorschau blockiert</p>
<span>Wird erst nach dem Veröffentlichen geladen.</span>
</div>
`;
iframe.parentNode.insertBefore(placeholder, iframe);
iframe.setAttribute("data-original-src", src);
iframe.setAttribute("src", "about:blank");
iframe.classList.add("preview-blocked");
}
}
});
}
}
if (document.readyState === "loading") {
document.addEventListener("DOMContentLoaded", blockPreviewIframes);
} else {
blockPreviewIframes();
}
})();
</script>

Alles anzeigen

Zitat

Hat jemand diesen Code bereits erfolgreich mit dem ZETA-iFrame-Widget getestet?

DANKE - Aber eine Sache wissen wir noch nicht:

Wann wird der JavaScript-Code ausgeführt?

Wenn ZETA das iFrame schon lädt, bevor dieses Script läuft, dann kommt der Request trotzdem beim Server an – auch wenn der Platzhalter anschließend erscheint.... und dann nützt es so nichts

aws

Hallo nemessis,

ich habe den Code noch einmal optimiert. Der neue Code ist jetzt ein echter "Wächter", da die berechtigte Frage aufkam, wann das JavaScript eigentlich ausgeführt wird.

Hier die kurze Erklärung: Damit das iFrame den Server nicht doch ganz kurz anfunkt, wartet dieses neue Skript nicht mehr, bis die Seite fertig geladen ist. Es läuft sofort an, während der Browser den Code von oben nach unten einliest. Dadurch fängt das Skript das iFrame exakt in dem Moment ab, in der es im Code auftaucht. Die originale Adresse wird sofort gelöscht und durch eine leere Seite ersetzt, bevor der Browser überhaupt den ersten Kontakt zum externen Server aufbauen kann.

In meinem ersten Post einen kleinen Formatierungsfehler durch die Forensoftware, bei dem die logischen "ODER"-Zeichen (||) verschluckt wurden. Das ist hier nun auch korrigiert (danke Phil für den Hinweis)

Ich habe das Ganze jetzt selbst nochmal bei mir auf einer Seite als Quelltext-Widget eingebunden und getestet: In der lokalen Zeta-Vorschau und im Offline-Browser werden alle iFrames absolut zuverlässig blockiert und der Platzhalter angezeigt. Sobald die Seite veröffentlicht und online ist, läuft alles ganz normal und die iFrames laden wie gewohnt.

CSS

Nutzt also am besten direkt diese aktualisierte Version:
<style>
/* Einfaches Basis-Styling für den Platzhalter */
.zp-preview-iframe-placeholder {
    display: none;
    width: 100%;
    height: 350px;
    background-color: #f8f9fa;
    border: 2px dashed #007bff;
    border-radius: 6px;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 20px;
    box-sizing: border-box;
    font-family: sans-serif;
    color: #333333;
    margin: 15px 0;
}
.zp-preview-iframe-placeholder p {
    margin: 0 0 5px 0;
    font-size: 16px;
    font-weight: bold;
    color: #007bff;
}
.zp-preview-iframe-placeholder span {
    font-size: 13px;
    color: #666666;
}

/* Steuerung über JavaScript-Klasse - aktiv in der lokalen Vorschau */
body.is-zeta-preview .zp-preview-iframe-placeholder {
    display: flex;
}
body.is-zeta-preview iframe.preview-blocked {
    display: none !important;
}
</style>

<script>
(function() {
    // Prüfen, ob wir uns in der lokalen Zeta-Vorschau befinden
    const isLocalhost = window.location.hostname === "localhost" || window.location.hostname === "127.0.0.1";
    const isLocalFile = window.location.protocol === "file:";
         
    if (isLocalhost || isLocalFile) {
        // Klasse sofort dem Body zuweisen oder vormerken
        if (document.body) {
            document.body.classList.add("is-zeta-preview");
        } else {
            document.addEventListener("DOMContentLoaded", function() {
                document.body.classList.add("is-zeta-preview");
            });
        }

        // Funktion zum Blockieren eines einzelnen iFrames
        function processIframe(iframe) {
            if (iframe.classList.contains("preview-blocked")) return;
            
            const src = iframe.getAttribute("src") || iframe.src;
            if (src && src !== "about:blank") {
                const protocols = ["http://", "https://", "//"];
                const isExternal = protocols.some(function(proto) { return src.startsWith(proto); });
                
                if (isExternal) {
                    // Erzeuge den Platzhalter
                    const placeholder = document.createElement("div");
                    placeholder.className = "zp-preview-iframe-placeholder";
                    placeholder.innerHTML = `
                        <div>
                            <p>🔄 iFrame-Vorschau blockiert</p>
                            <span>Wird erst nach dem Veröffentlichen geladen.</span>
                        </div>
                    `;
                    
                    // Trick: src leeren, BEVOR das iFrame im DOM agieren kann
                    iframe.setAttribute("data-original-src", src);
                    iframe.src = "about:blank";
                    iframe.setAttribute("src", "about:blank");
                    iframe.classList.add("preview-blocked");
                    
                    // Platzhalter im DOM platzieren
                    if (iframe.parentNode) {
                        iframe.parentNode.insertBefore(placeholder, iframe);
                    }
                }
            }
        }

        // 1. Echtzeit-Überwachung (MutationObserver): Erwischt iFrames beim Laden der Seite
        const observer = new MutationObserver(function(mutations) {
            mutations.forEach(function(mutation) {
                mutation.addedNodes.forEach(function(node) {
                    if (node.nodeName === "IFRAME") {
                        processIframe(node);
                    } else if (node.querySelectorAll) {
                        const iframes = node.querySelectorAll("iframe");
                        iframes.forEach(processIframe);
                    }
                });
            });
        });

        // Start der Überwachung des gesamten Dokuments ab sofort
        observer.observe(document.documentElement, {
            childList: true,
            subtree: true
        });

        // 2. Sicherheits-Fallback für bereits bestehende iFrames
        if (document.readyState !== "loading") {
            document.querySelectorAll("iframe").forEach(processIframe);
        } else {
            document.addEventListener("DOMContentLoaded", function() {
                document.querySelectorAll("iframe").forEach(processIframe);
            });
        }
    }
})();
</script>

Alles anzeigen

nemessis

Danke erstmal an alle, teste ich

nemessis

Da ich keine Ahnung habe, hab ich KI dazu befragt: Aber ich bin noch vorsichtig

Ich kann dir nicht garantieren, dass dadurch gar kein Request mehr an kreuzfahrt.in-via.de geht. - DENN darum geht es, wenn die Seiten zu oft geladen werden bekommt meine IP eine Sperre und die Scripte laden nicht mehr.. und ich kann schlecht weiter arbeiten..

Der Grund ist folgender:

Wenn ZETA das <iframe src="https://..."> bereits in das HTML schreibt, kann der Browser den Ladevorgang schon starten.
Der MutationObserver reagiert zwar extrem schnell, aber eben nachdem das Element eingefügt wurde. - was meinst du dazu...

aws

Hallo nemessis,

chapeau, das ist technisch völlig richtig gedacht!

Hier kommt der entscheidende Punkt, warum der neue Code den Request trotzdem zuverlässig blockiert:

Der Browser arbeitet HTML-Code stur von oben nach unten ab. Wenn er auf das iFrame-Tag stößt, baut er das Element zwar im Speicher auf, schickt aber nicht sofort im selben Bruchteil einer Millisekunde den Netzwerk-Request ins Internet. Da unser MutationObserver direkt am allerersten Element (<html>) ansetzt, ist er schneller als der Netzwerk-Prozess des Browsers.

Ich habe es auf einer meiner Seiten mit mehreren externen iFrames live getestet. Es taucht kein einziger Aufruf zu den externen Servern mehr auf.

Probiere es einfach mal mit einer Testseite aus.

Grüße Armin (AWS)

nemessis

Danke, KI hat sich gefreut.... aber wo trage ich diesen Code ein? es sollen ja nur Scripte die über kreuzfahrt.in-via.de laufen gebloggt werden, das will KI mir noch anpassen... DANKE für deine Hilfe!

aws

Da solltest nur eine kleine Änderung vornehmen
aktuell
const protocols = ["http://", "https://", "//"];
const isExternal = protocols.some(function(proto) { return src.startsWith(proto); });

if (isExternal) {
const placeholder = document.createElement("div");

Neu, nur kreuzfahrt.in-via.de (den oberen Code ersetzen mit dieser Zeile)
// Blockiert NUR iFrames, die die In-Via Domain beinhalten
if (src.includes("kreuzfahrt.in-via.de")) {
const placeholder = document.createElement("div");

Füge den Code einfach direkt auf der betroffenen Seite als Quelltext-Widget ein

Gruss

Armin

Stefan S

Freundlicher Hinweis: Dieser Thread wird für Mitesser vermutlich langsam uninteressant. Vielleicht wäre es besser, Sie klären das erstmal unter 4 Augen und lassen uns alle dann ggf. wieder an der Lösung teilhaben?

aws

Danke Stefan für den Hinweis. Das ist ein vollkommen korrekter Hinweis.

Gruß

Armin

nemessis

.. wo auf der Web- Seite trage ich ein Quelltext Widget ein das es auf allen Seiten - Unterseiten wirksam ist...

Stefan S

Bitte künftig etwas ausführlicher beschreiben, was Sie erreichen wollen und welche Schritte Sie das ei bereits versucht haben oder was Sie im Handbuch nicht verstehen.

Es spielt keine Rolle, wo ein Artikel platziert wird, er kann grundsätzlich auf andere Seiten verknüpft werden. Also lesen Sie den Handbuch-Artikel ggf. nochmals durch: https://docs.zeta-producer.com/v16/verknuepfungen-einfuegen.html

nemessis

Ich habe ein Quelltext Widget mit einem Code, das soll iframes mit integrierten Code - NICHT in der Phase Bearbeiten anzeigen, der Inhalt soll erst nach dem Veröffentlichen zu sehen sein.

Meine Frage bezieht sich also nicht auf den Code selbst, sondern auf den Einbauort in ZETA Producer.

Momentan funktioniert der Code nur auf der Seite, auf der ich ihn als Quelltext-Widget eingefügt habe.

Ich möchte den Code jedoch nicht auf jeder einzelnen Seite einfügen, sondern einmal pro Projekt, sodass er automatisch auf allen Seiten des Projekts ausgeführt wird.....

Stefan S

Ich dachte das wäre bereis geklärt. Zumindest lese ich den Titel dieses Beitrag so, dass Sie verstanden haben, dass das Widget mit dem Code dann auch entsprechend auf die Seiten verknüpft werden muss. Und wie das geht steht auf der verlinkten Handbuchseite.

Wenn Sie es nicht über Verknüpfen lösen möchten/können, dann können Sie auch Attribute nutzen.

nemessis

eben nicht, wenn ich das einzeln verknüpfen muss kann ich das Widget ja auch gleich auf alle Unterseiten platzieren,

ich dachte es geht das man es nur 1mal einfügt und es wirkt auf allen Seiten die das iframe enthalten...

Gibt es in ZETA Producer eine Stelle, an der eigener HTML-/JavaScript-Code global für das gesamte Projekt eingebunden werden kann, sodass er automatisch auf allen Seiten ausgeführt wird?

Falls nein: Ist das technisch in ZETA Producer überhaupt nicht möglich?

Ich habe mir die Dokumentation angesehen. Die Attribute in ZETA sind dafür gedacht, Werte (Texte, URLs, Farben, Zahlen usw.) zentral zu verwalten und auf Seiten oder im Layout wiederzuverwenden. Sie sind kein Mechanismus, um global JavaScript auszuführen.

Stefan S

Dann hatten Sie die "Verknüpfungsfunktion" falsch verstanden. Dabei geht es nicht um die Zeitersparnis beim Verknüpfen, sondern darum, dass Sie eine Änderung zentral an einer Stelle machen können und diese sich dann automatisch auf alle Verknüpfungen auswirkt.

nemessis

Vielen Dank, jetzt verstehe ich die Verknüpfungsfunktion.

Mein Ziel ist jedoch ein anderes:

Ich möchte das Quelltext-Widget gar nicht erst auf jeder Seite einfügen müssen.

Gibt es in ZETA Producer eine Möglichkeit, eigenes HTML/JavaScript einmal pro Projekt einzubinden, sodass es automatisch auf allen Seiten des Projekts ausgeführt wird – ohne dass auf jeder Seite ein (verknüpftes) Quelltext-Widget vorhanden sein muss?

Oder ist das grundsätzlich nicht möglich?

Stefan S

Zitat von nemessis

Gibt es in ZETA Producer eine Möglichkeit, eigenes HTML/JavaScript einmal pro Projekt einzubinden, sodass es automatisch auf allen Seiten des Projekts ausgeführt wird – ohne dass auf jeder Seite ein (verknüpftes) Quelltext-Widget vorhanden sein muss?

Ja, über die bereits erwähnten Attribute: https://docs.zeta-producer.com/v16/attribute.html?q=attribute

Ich denke, nun haben wir genügend Zeit in ein Problem investiert, dessen Ursache der Anbieter des iFrame Inhalts ist, der Sie blockiert. Ich denke, das Problem sollte eher an der Wurzel behoben werden (bei der Blockierung).

nemessis

Ich glaube, wir sprechen gerade über zwei verschiedene Dinge.

Mir geht es nicht darum, den Inhalt des Quelltext-Widgets zentral zu verwalten. Das würde über Attribute oder Verknüpfungen funktionieren.

Meine Frage ist eine andere:

Kann ich ein Quelltext-Widget bzw. JavaScript einmal pro Projekt einbinden, sodass es automatisch auf allen Seiten ausgeführt wird?

Oder muss auf jeder Seite, auf der das JavaScript laufen soll, zwingend ein Quelltext-Widget vorhanden sein?

Mir geht es ausschließlich um den Einbauort, nicht um die zentrale Pflege des Codes.

und nicht ich werde vom Anbieter des iFrame Inhalts blockiert, sondern ich will das zu häufige Aufrufen des iframes schon beim bearbeiten unterbinden...

Sie sprechen über die zentrale Verwaltung des Codes.
Ich spreche über die globale Ausführung des Codes.
Ich suche keine Lösung für iFrames, sondern eine allgemeine Möglichkeit, eigenes JavaScript global einzubinden.

phil-web

Hallo,

Zitat

Kann ich ein Quelltext-Widget bzw. JavaScript einmal pro Projekt einbinden, sodass es automatisch auf allen Seiten ausgeführt wird?

Genau dafür sind, wie von Stefan bereits beschrieben, projektweite Attribute wie bsp. "mobile_script" da.

Frage zu iframe

Stefan S 25. Juni 2026 um 15:53

Stefan S 26. Juni 2026 um 15:22

Stefan S 30. Juni 2026 um 09:25

Jetzt mitmachen!

Ähnliche Themen

JavaScript-Zugriff auf Shop-Elemente blockiert

Anzeigebereich rochtigstellen

Grundsätzliche Frage zum Cookie Banner / Iframe blockieren

You Tube Links führen zu fremden Seiten / Seitenaufruf nicht mehr möglich

Hilfe zum Support-Forum

Wollen Sie eine professionelle Website erstellen?