iframe Höhe dynamisch

Shopware 5 Themes & Design
1

Ich möchte per iframe externe Inhalte einbinden. Allerdings soll die Höhe dynamisch angepasst werden (per javascript?). Wie kann ich das in Shopware 5.2 am besten lösen?

2

Was genau ist Deine Schwierigkeit?

3

Das veritkal ein Scrollbalken zu sehen ist. Diesen kann man sicher ausblenden, aber dann wird nicht der komplette Inhalt in der Höhe angezeigt. Aus diesem Grunde wollte ich, das sich iframe in der Höhe ensprechend anpasst.

4

Hast Du das schon mal getestet?: javascript - Make iframe automatically adjust height according to the contents without using scrollbar? - Stack Overflow

 

 

5

Habe mir deinen Link angeschaut bzw folgendes umgesetzt

in der

/themes/Frontend/mein_theme/frontend/index/index.tpl

folgenden Code

{block name="frontend_index_header_javascript_jquery"" append}

{/block}

in der

/themes/Frontend/mein_theme/frontend/_public/src/js/iframe.js

steht folgender Code

function getDocHeight(doc) {
    doc = doc || document;
    // stackoverflow.com/questions/1145850/
    var body = doc.body, html = doc.documentElement;
    var height = Math.max( body.scrollHeight, body.offsetHeight, 
        html.clientHeight, html.scrollHeight, html.offsetHeight );
    return height;
}

function setIframeHeight(id) {
    var ifrm = document.getElementById(id);
    var doc = ifrm.contentDocument? ifrm.contentDocument: 
        ifrm.contentWindow.document;
    ifrm.style.visibility = 'hidden';
    ifrm.style.height = "10px"; // reset to minimal height ...
    // IE opt. for bing/msn needs a bit added or scrollbar appears
    ifrm.style.height = getDocHeight( doc ) + 4 + "px";
    ifrm.style.visibility = 'visible';
}

document.getElementById('ifrm').onload = function() { // Adjust the Id accordingly
    setIframeHeight(this.id);
}

Das iframe wird folgendermassen eingebunden

Leider wird die Höhe nicht dynamisch angepasst bzw es erscheint nur ein Fenster von geringer Höhe. Chrome zeigt noch folgenden Fehler an

Uncaught SyntaxError: Unexpected token < iframe.js:1

Wo liegt der Fehler? Wäre echt prima, wenn mir da jemand weiterhelfen könnte.

6

Problem gelöst. Folgenden Zeilen mussten entfernt werden

Nun funktioniert die dynamische iframe Einbindung problemlos. Danke nochmal für die Hilfe.

7

Hab das gleiche Problem, für die Einkaufswelten in Shopware 5.4.6. Leider funktioniert es bei mir nicht, obwohl ich die Schritte wie oben beschrieben vorgenommen habe. Wo wird denn das iFrame eingefügt? Ich hab es in den Einkaufswelten unter “HTML-Code” eingefügt, scheint nicht zu funktionieren. Muss man das direkt im Template einbinden?

8

Hi zusammen,

habe mit Erleichterung diesen Post gefunden, da ich in den Einkaufswelten das Problem mit der Höhenanpassung habe.

Ich schreibe also einen Text, dieser wird aber entweder abgeschnitten oder hat unten zuviel Platz…

Die Höhe sollte also dynamisch nach Inhalt angepaßt werden.

Wie kann ich das lösen?

Über Hilfe würde ich mich sehr freuen.

Vielen Dank

Alex

SW 5.5.10

 

9

Verwende mal dafür den Zeilenmodus. Du kannst eine Page aus mehreren EKWs in verschiendenen Modi zusammenbauen. 

Hoffe das hilft.

1 „Gefällt mir“