WBCE CMS Forum

WBCE CMS – Way Better Content Editing.

You are not logged in.

#1 22.02.2020 00:22:07

bastie
Member

Iframe responsive machen

Hallo zusammen,

diese Frage betrifft ein WBCE-Projekt, ist aber auch eine Frage, die nicht zwingend mit WBCE zu tun hat, sondern auch allgemein ist, daher hier um eine allgemeine technische Frage handelt.

Folgendes Problem. Für ein von mir betreutes Projekt (soll auf WBCE umgestellt werden) soll ich Belegungskalender einbinden, der von der Ferienobjektverwaltung per Iframe zur Verfügung gestellt wird. Es gibt dort zwar die Möglichkeit, Text, Farben usw. zu ändern, aber es bleibt halt der vorgegebene IFrame zum einbinden.

So weit so gut, auf normalen Monitor und Laptop sieht alles prima aus, aber macht man den Bildschirm schmaler (natürlich auch am Smartphone) fehlt in der Höhe der größte Teil.

Ich hab schon mehrere Lösungen versucht, aber komme nicht wirklich weiter, entweder die Darstellung bleibt, wie sie ist oder es erscheint ein zusätzlicher Scrollbalken. Damit könnte man ja zur Not noch leben, aber schön geht anders.

Siehe hier mit scrolling="yes" im Iframe (funktiomiert, sieht aber Sch... aus)  https://fepa.derwolldackel.de/pages/fer … lender.php

Ohne scrolling="yes" sieht es so aus: https://fepa.derwolldackel.de/pages/fer … nung-2.php, ist eben nicht per Smartphone nutzbar.

Die Domain ist nicht die des Ferienparks, sondern speziell für das Testen mit WBCE angelegt.

Wie kann ich das Problem lösen? Es geht ja eigentlich im Grunde um responsive IFrames generell.

Gruß
Bastie

Last edited by bastie (22.02.2020 00:24:40)


Wer Rechtschreibfehler findet, darf sie gerne herunterladen, kopieren, weiterverwenden und weiterverbreiten. Ich beanspruche in keiner Weise ein Urheberrecht. Meine Rechtschreibfehler stehen ausschließlich unter der CC0-Lizenz.

Offline

#2 22.02.2020 03:04:46

losttrip
Member

Re: Iframe responsive machen

Vielleicht verstehe ich Ihre Bedürfnisse nicht, da ich die Übersetzung ins Englische verwende.  Bitte ignorieren Sie, wenn dies Ihr Problem nicht löst.

Es gibt ein Skript, das die Größe des Iframe entsprechend seinem Inhalt ändert.  Der Iframe MUSS jedoch aus derselben Domäne stammen wie die Anzeigeseite.  Sie können hier mehr lesen - https://css-tricks.com/snippets/jquery/ … o-content/

Wenn der Iframe aus einer anderen Domäne stammt, dann müssen Sie die Höhe einstellen und Scrollen oder Überlauf-y = "auto" verwenden, um das Scrollen zu ermöglichen.
Ich ziehe es vor, die Höhe von Iframes z.B. mit Viewport-Einheiten festzulegen:

height: 90vh;

Auf diese Weise ist die Bildlaufleiste des Rahmens immer von oben nach unten in jedem Gerätefenster (Handy) sichtbar.

Ich hoffe, das hilft.

Übersetzt mit www.DeepL.com/Translator (kostenlose Version)


I may not understand your needs, as I am using translate to English.  Please ignore if this is does not solve your issue.

There is a script that will resize the iframe according to it's content.  The iframe MUST originate on the same domain as the display page though.  You can read more here - https://css-tricks.com/snippets/jquery/ … o-content/

If the iframe originates on another domain, then you will need to set the height and use scrolling or overflow-y ="auto" to allow for scrolling.
I prefer to set the height of iframes using viewport units, for instance:

height: 90vh;

That way the irame scroll bar is always visible top to bottom in any device (mobile) window.

Hope this helps.

Offline

#3 22.02.2020 03:30:13

bernd
Developer

Re: Iframe responsive machen

Mmmmmh ...

Eine Runde nach "iframe höhe dynamisch" googeln bringt unterm Strich eigentlich nur zwei (unbrauchbare) Möglichkeiten die Höhe des iframes per Javascript anzupassen (falls ich nichts übersehen habe):
1. uralte Scripte um die Höhe des Inhalts auf dem liefernden Server auszulesen -> scheitert heutzutage an dem CrossOrigin-Gedöhns
2. ein Script auf dem liefernden Server installieren - den Anbieter möchte ich sehen, der das einfach so erlaubt  devil

Bischen um's Eck gedacht wäre es u.U. möglich das ganze ohne iframe hinzubekommen:
Voraussetzung: auf deinem Server ist "allow_url_fopen" aktiviert/verfügbar!
dann könnte man einfach einen Code2-Abschnitt an Stelle des iframes reinbasteln mit

$iframe = file_get_contents('URL');
echo $iframe;

Das liest die komplette HTML-Seite in die variable $iframe.
URL ist dabei die, die du beim iframe für src verwendest.

Der Haken da dran:
man produziert damit wunderbares ungültiges HTML, da man im body nochmal ein komplettes Dokument mit head, etc. hat cry


... nein in Europa verwenden wir beim Programmieren nicht € statt $ ...

Online

#4 22.02.2020 17:34:00

bastie
Member

Re: Iframe responsive machen

bernd wrote:

Mmmmmh ...

Eine Runde nach "iframe höhe dynamisch" googeln bringt unterm Strich eigentlich nur zwei (unbrauchbare) Möglichkeiten die Höhe des iframes per Javascript anzupassen (falls ich nichts übersehen habe):
1. uralte Scripte um die Höhe des Inhalts auf dem liefernden Server auszulesen -> scheitert heutzutage an dem CrossOrigin-Gedöhns
2. ein Script auf dem liefernden Server installieren - den Anbieter möchte ich sehen, der das einfach so erlaubt  devil

Bischen um's Eck gedacht wäre es u.U. möglich das ganze ohne iframe hinzubekommen:
Voraussetzung: auf deinem Server ist "allow_url_fopen" aktiviert/verfügbar!
dann könnte man einfach einen Code2-Abschnitt an Stelle des iframes reinbasteln mit

$iframe = file_get_contents('URL');
echo $iframe;

Das liest die komplette HTML-Seite in die variable $iframe.
URL ist dabei die, die du beim iframe für src verwendest.

Der Haken da dran:
man produziert damit wunderbares ungültiges HTML, da man im body nochmal ein komplettes Dokument mit head, etc. hat cry

@losttrip: das IFrame stamm ja gerade von einer externen Domain. Die Lösung von CSS-Tricks hilft nicht wirklich weiter, aber vielleicht reichen da meine Kenntnisse nicht aus.

Naja, auf den IFrame selber habe ich ja keinen Einfluß, Fungiwo gibt das einfach als Code zum Kopieren vor. Außer ein bißchen Farben zu ändern mache ich da nix. Ok, ich kann aus scrolling="no" Scrolling="yes" machen, mit eben dem häßlichen zusätzlichen Scrollbalken.  Gerade den würde ich gerne vermeiden.

Verschiedene Lösungen habe ich ja auch schon ausprobiert, aber die sind, wie Du festgestellt hast, ziemlich unbrauchbar, bzw. verschlimmbessern das  alles.

Ob auf meinem Server  "allow_url_fopen" aktiviet ist, ist nicht das Problem, ich bin bei WebHostOne, da ist viel möglich. Die echte Seite läuft bei 1&1, bzw. IONOS, wie es ja jetzt heißt. Das müßte ich überprüfen, Aber das mit dem ungültigen HTML dabei ist auch Mist.

Jedenfalls erst mal vielen Dank für die Antworten


Wer Rechtschreibfehler findet, darf sie gerne herunterladen, kopieren, weiterverwenden und weiterverbreiten. Ich beanspruche in keiner Weise ein Urheberrecht. Meine Rechtschreibfehler stehen ausschließlich unter der CC0-Lizenz.

Offline

#5 22.02.2020 17:40:33

boeseroeser
Guest

Re: Iframe responsive machen

bernd wrote:

Der Haken da dran:
man produziert damit wunderbares ungültiges HTML, da man im body nochmal ein komplettes Dokument mit head, etc. hat cry

Ja - und dieser Haken ist gewaltig. Realistisch schafft man das nicht (auch ich würde das nicht schaffen)

Was ich tun würde:
<iframe .... scrolling=no ... >
Damit fällt der hässliche Scrollbalken weg. Die höhe muss man halt genau austarieren.

Am Handy muss man da sowieso aufpassen: Wenn der iframe sehr hoch ist, kommt man da nicht weiter, weil man nur im iFrame scrollt und eventuell das Menü nicht mehr erreicht.

#6 22.02.2020 17:59:27

bernd
Developer

Re: Iframe responsive machen

Naja, der Quelltext den die ausgeben ist an sich schon recht wirsch, Metaangaben sowie kilometerweise Styleangaben vor dem head, etc.
Da käme es auf das bischen Unschönheiten auch nicht mehr wirklich an.

Noch 'ne blöde Idee:
man könnte hergehen und die Seite per file_get_contents holen dann aber statt auszugeben in eine Datei schreiben, diese Datei dann vom eigenen Server in einen iframe laden, dann könnte man mittels Javascript die Höhe ermitteln.
Grob skizziert:
Code2 Abschnitt

[== PHP ==]
$iframe = file_get_contents('URL');
file_put_contents('iframe_inhalt.html', $iframe);

dann der iframe

<iframe src="iframe_inhalt.html" style="width:100%; height:200px; border:none;" frameborder="0" name="irgendwas" scrolling="no"></iframe>

und ein Scriptteil

[== JavaScript ==]
<script>
var framefenster = document.getElementsByTagName("iframe");
  var auto_resize_timer = window.setInterval("autoresize_frames()", 400);
  function autoresize_frames() {
    for (var i = 0; i < framefenster.length; ++i) {
        if(framefenster[i].contentWindow.document.body){
          var framefenster_size = framefenster[i].contentWindow.document.body.offsetHeight + 20;
          if(document.all && !window.opera) {
            framefenster_size = framefenster[i].contentWindow.document.body.scrollHeight;
          }
          framefenster[i].style.height = framefenster_size + 'px';
        }
        console.log(framefenster_size);
    }
  }
</script>

Wie performant das ganze ist und was passiert wenn hundert Besucher gleichzeitig zugreifen also die HTML-Datei gleichzeitig neu geschrieben und gelesen wird müsste man halt ausprobieren...


... nein in Europa verwenden wir beim Programmieren nicht € statt $ ...

Online

#7 22.02.2020 18:05:16

florian
Administrator

Re: Iframe responsive machen

Evtl. ein Fall für die Inline Wrapper?
https://addons.wbce.org/pages/addons.ph … m&item=124

Offline

#8 22.02.2020 18:18:31

bernd
Developer

Re: Iframe responsive machen

@Florian:
hatte ich auch schon auf dem Schirm, der scheitert leider am kaputten HTML welches da ausgeliefert wird ...

Inline Wrapper wrote:

No bodytags found


... nein in Europa verwenden wir beim Programmieren nicht € statt $ ...

Online

#9 24.02.2020 15:05:36

florian
Administrator

Re: Iframe responsive machen

Wenn man in der modules/inlinewrapper/HtmlPage.php Zeile 132-135 auskommentiert und stattdessen da angibt

$lBody = $lPageContents;

bekommt man zumindest schon mal den Inhalt zu fassen. Allerdings bleiben die Styles auf der Strecke, die müsste man also noch händisch aus der Seite, die von dem Anbieter bereitgestellt wird, herauskopieren  und in einen code2-Abschnitt auf der Seite einfügen und ggf. noch etwas anpassen.

Offline

#10 02.03.2020 22:15:05

bastie
Member

Re: Iframe responsive machen

Ich war ja in der Zwischenzeit auch nicht untätig und hab weiter recherchiert und ausprobiert. Fast alle angebotene Lösungen beziehen sich entweder auf YouTube-Videos oder auf iframes auf dem eigenen Server. Und funktiomieren tut keins so richtig. Außer bei den Videos wird die Höhe entweder abgeschnitten oder es bleiben ewig lange Leerräume. Sieht einfach nur Sch... aus.

Ich hab da noch mal nachgefragt,aber ich darf die ganze Sache nur mit den IFrames einbinden, die Fungiwo liefert.

Also beiße ich in den sauren Apfel und mache scrolling="yes". Ist zwar nicht schön aber scheint mir im Augenblick die beste Lösung zu sein.

Vielleicht gibt es ja in nicht allzuferner Zukunft mal ne praktikable Lösung. Das ist ja nicht nur etwas, mit dem ich mich im Augenblick herumschlage, sondern eine allgemeine technische Frage - denk ich mir mal so.

Jedenfalls vielen Dank für Euren eingesetzten Hirnschmalz.


Wer Rechtschreibfehler findet, darf sie gerne herunterladen, kopieren, weiterverwenden und weiterverbreiten. Ich beanspruche in keiner Weise ein Urheberrecht. Meine Rechtschreibfehler stehen ausschließlich unter der CC0-Lizenz.

Offline

#11 03.03.2020 07:06:14

florian
Administrator

Re: Iframe responsive machen

Tja, wenn fungiwo nicht mitspielt, geht es wohl nicht. Ein anderer Anbieter von Belegungsplänen bietet mittels window.message die Möglichkeit, den Kalender-iframe dynamisch in der Höhe anzupassen, Genaueres gern per PM, falls ein Wechsel infrage kommt.

Ansonsten bliebe noch, den eingebundenen iframe für smartphones/tablets per CSS unsichtbar zu machen und für diese Größe nur eine Platzhaltergrafik anzuzeigen, die dann beim Antippen den Belegungskalender ohne was drumherum öffnet.

Offline

#12 10.05.2020 14:25:58

Slugger
Member

Re: Iframe responsive machen

Reminder für mich:
-> http://maddesigns.de/responsive-iframes-2417.html

ToDo:
Öffentlicher Googlekalender und NC-Kalender, Einbindung iframe mit dem Modul Wunderblock

Last edited by Slugger (10.05.2020 18:46:21)


Hoster: ALL-INKL *** Grundsätzliche WBCE Konfig ***
WBCE: 1.4.4 • BE: 2.1.0 • PHP: 7.4.5
1. Projekt: FE: lichtfjyr • BE: Argos * 2. Projekt: FE: WBCEZon • BE: Argos * 3. Projekt: FE: WBCETik • BE: Argos
Status  OK

Online

#13 11.05.2020 06:01:33

klawin
Member

Re: Iframe responsive machen

Guten Morgen,

könnte man nicht die reinen Daten aus dem gelieferten Stream nehmen und in einen eigenen Kalender eingetragen?

Gruß
Klawin


Egal wie du es machst, du machst es falsch! Also mache es einfach.

Offline

#14 16.05.2020 15:40:31

Slugger
Member

Re: Iframe responsive machen

Hallo Klawin,
das macht das Modul "extcal"

In wie weit man daraus einen eigenen Kalender stricken kann, weiß ich nicht.

Zumindest wird eine Listenansicht dargestellt.

Last edited by Slugger (16.05.2020 16:34:06)


Hoster: ALL-INKL *** Grundsätzliche WBCE Konfig ***
WBCE: 1.4.4 • BE: 2.1.0 • PHP: 7.4.5
1. Projekt: FE: lichtfjyr • BE: Argos * 2. Projekt: FE: WBCEZon • BE: Argos * 3. Projekt: FE: WBCETik • BE: Argos
Status  OK

Online

Board footer

Powered by FluxBB

up