@Nina-D

Meine Erfahrungen mit solchen Problemen sind zahlreich. Letztlich scheiterte eine machbare Lösung meist daran, dass die eigene Website einerseits und der Iframe-Inhalt anderseits auf verschiedenen Domains laufen; und dazu zählt auch die Situation, dass eigener Code auf einer Subdomain gehostet wurde. Funktionieren tut das Ganze M.E. ganz gut mit php wenn alles auf einer Domain ist um die Same-Origin-Policy umzusetzen.
Für mich ist nicht ersichtlich, wie der Anbieter den Code anbietet. Wenn es noch andere Angebote als Iframe gäbe, wäre das evtl. eine Möglichkeit.

Als nächstes kommt dann sicherlich ein Problem, die Buchungsseiten für diverse Devices in der richtigen Breite anzubieten bzw. responsiv. Ein erster Überblick zeigt, dass dein Anbieter sehr nette Microsites anbietet. Vielleicht wäre das für dich die schnellste und auch sicherste umsetzbare Möglichkeit. ? Diese würden sicherlich auf jedem Smartphone etc wunderbar funktionieren.
Wenn ich das richtig sehe, kann man dort ja auch die Texte bereitstellen und somit personalisieren. Das klingt gut. Als Anwender wäre mir sowas auch lieb, weil ich dann direkt sehe, dass ich mich bei einem anderen Anbieter / Seitenbetreiber bewege (Datenschutz). Finde das nicht schlimm und die Seiten für die Terminwahl sehen auch nett aus.
Vielleicht kannst du noch ein paar Infos über den Einbindungscode geben. Gruß Marboe

Hallo BeRo und marboe,

vielen Dank für eure erste Einschätzung.

Ok erstmal gut zu wissen, dass dieser Scroll- Code nichts zur Sache 😅

Onlinetermine.com bietet ja 3 Möglichkeiten an:

1. Per Micropage, die ich nur als letzte Option (wenn sonst nix geht) wählen möchte, da ich es schöner finde in meiner eigenen Seite einzubinden.
In der Buchungsfunktion steht unten immer, dass es sich um einen Service von Onlinetermine handelt, das finde ich dann auch transparent für die Kunden.

2. Per Iframe

Ich habe folgenden Code verwendet:

<iframe src="https://satellite.booking-time.com/?key=05199382d7d76e6a" width="90%" height="2500" name="Online Buchung" title="Hier online buchen"border="0" frameborder="0" align="left"></iframe>

3. Als Quelltext für die HP

Da sieht der Code so aus:

<script type="text/javascript" src="https://satellite.booking-time.com/?js=05199382d7d76e6a"></script>

Die Iframe und Quelltext-Codes ergeben bei mir das selbe Ergebnis. Bei den oberen Hauptkategorien entstehen noch keine Probleme, wenn man aber nach unten scrollt und die letzte Hauptkategie z.B anklickt, wird der Inhalt oben geladen und der Kunde sieht nur weißes Feld...

Und marboe hat auch recht, dass das Buchungsmodul in der Mobilversion auch garnicht erst angezeigt wird 😕

Fällt euch irgendeine Lösung ein, ob es doch gehen könnte oder muss man beim WD auf sowas verzichten?

[...] Fällt euch irgendeine Lösung ein, ob es doch gehen könnte [...]

Aber ja... 😉

Es gibt eine ebenso einfache, wie elegante Lösung, die ebenfalls auf einem iframe basiert.
Das Ergebnis sieht so aus:

Der "Trick" ist das einbinden einer lokalen HTML Datei, die ihrerseits die externe Seite einbindet.
Der positive Effekt ist schon im Scrollbalken sichtbar. Das heißt, dass Du das Formularfenster jetzt so kurz halten kannst, dass es immer die komplette Höhe des Browser Fensters einnimmt. Das Scrollen der Hauptseite entfällt damit.

Schau Dir mal die online Demo an (klick), die natürlich auch auf einem Smartphone funktioniert 😊
Die Projektdatei für den fälligen "Anschauungsunterricht" gibt es hier (klick).

Das Formular, das jetzt auf der zusätzlich erzeugten Seite "booking.html" liegt, wird mit dem u. a. iframe Code eingebunden, der seinerseits in einem Platzhalter liegt, der nicht höher ist als die normale Seitenhöhe, die noch ins Browser Fenster passt.

<iframe id="booking" src="./index_htm_files/booking.html" width="100%" height="100%" frameborder="0" scrolling="auto" name="xara_iframe"><p>Your browser does not support iframes.</p></iframe>

Die Seite "booking.html" enthält nur den JScript Code mit dem die externe Site referenziert wird.

<script type="text/javascript" src="https://satellite.booking-time.com/?js=05199382d7d76e6a"></script>

Das ist schon das ganze "Geheimnis" 😍

Hi BeRo,

die Idee ist mal wieder genial 😃! Ich habe es jetzt genauso gemacht wie in deiner Anleitung und es funktioniert schonmal prima, vielen Dank😁😁😁

Ich finde in deinem Beispiel sieht es sehr schön aus, weil der Frame so schmal eingefügt ist. Dann fällt es mit den "doppelten Scrollbalken" im Feld und im Browse garnicht auf 😉

Diese schmale Variante passt aber nicht so gut in mein Design und ich hätte das Frame gerne auf die gesamte Seitenbreite...wenn ich das aber so mache, wirkt es irgendwie gemogelt...Dann scrollt je nachdem eher die Browser-Scrollleiste oder die des Frames...

Gut, ich will ja nicht rummosern 😉...ich könnte die Variante auch akzeptieren.

Was ich mich noch gefragt habe ist:

Kann man den Inhalt des I-Frames auch linksbündig erscheinen lassen? Bei mir wird der Inhalt mittig angezeigt, wenn ich das Buchungsfeld auf die ganze Seitenbreite eingefügt habe. Fände es schöner, wenn der Inhalt einfach linksbündig auf der Seite beginnt.

Und dann kam mir noch so eine Idee:

Könnte man mit dem WD auch so etwas machen, dass sich die Buchungsseite in einem kleinen Pop-Up-Browser-Fenster (nicht Popup-Ebene) öffnet? Also nicht in einem neuen großen Browser-Fenster, sondern in einem verkleinerten Fenster, dass dann über der Site erscheint?

Wisst ihr was ich meine?

Hey wow, du hast ja immer für alles eine Lösung 😍

Ich habe das alles so umgesetzt und meine Desktop-Seite ist jetzt linksbündig und auch zufriedenstellend.
Juhuu😁

Allerding bereitet mir die Mobilseite noch Schwierigkeiten:

Ich habe wie empfohlen eine neue "booking-mobil.html" erstellt, Platzhalter richtig verknüpft. Größe des Platzhalters (342 px) ist größer als die angegebene Größe im Skript (295px).

Die Höhe des Platzhalters habe ich schon sehr niedrig gehalten (360px). So ein kurzes Feld wirkt schon seltsam in der Mobilversion, finde ich.

Aber trotz allem entsteht genau das Problem, was ich am Anfang mit der Desktop-Variante hatte:
Wenn ich, z.b auf die Hauptkategorie 3 klicke, die ja schon weiter unten im Scrollfeld ist und das Iframe neu geladen wird, wird der neue Inhalt schon wieder zu weit oben geladen. Es sind nicht alle Felder sofort erkennbar und der Kunde muss hoch scrollen....Bei den unteren Kategorien sieht man schon fast garnichts mehr...alles zu weit oben...

In deinem Beispiel-Projekt hat deine Mobilseite ja kein Scrollfeld mehr und wird auch oben geladen.

Bei mir nicht....Woran kann das liegen? Habe ich da irgendwie einen Denkfehler? Ich glaub ich bin schon ganz konfus vor lauter Ausprobieren🙈

[...] In deinem Beispiel-Projekt hat deine Mobilseite ja kein Scrollfeld mehr und wird auch oben geladen. Bei mir nicht [...]

Der Grund könnte die deutlich zu geringe Höhe des Platzhalter sein...

[...] Die Höhe des Platzhalters habe ich schon sehr niedrig gehalten (360px) [...]

In meinem Beispielprojekt habe ich die Höhe von 680px gewählt.
Probier's mal damit...

Hi BeRo,

hab einmal drüber geschlafen und mich nochmal dran gesetzt 😄

Was ich jetzt feststellen konnte ist, dass ich den Div-Tag lieber nicht in die Html-Seite der Mobil-Version schreibe. Ich habe dann ja den doppelten Scrollbalken, was bei der Mobilversion wohl nicht nötig ist (siehe dein Projekt).

Egal wie hoch ich den Platzhalter mache, das Problem entsteht trotzdem. Die geringe Höhe war der nicht gelungene Versuch, die Verschiebung noch in Grenzen zu halten 😅 War zwecklos...Ob langer oder kurzer Platzhalter...es gab immer diese Verschiebung.

Aber soweit so gut. Ich habe dieses Problem für mich jetzt gelöst, indem ich den selben Platzhalter wie du, mit 680px Höhe, eingefügt habe und in die neu erstellte Datei "booking-mobil.html", nicht den DIV-Tag der Desktop-Version eingegeben habe, sondern den ursprünglichen Code (wie in deinem Platzhalter)

<script type="text/javascript" src="https://satellite.booking-time.com/?js=05199382d7d76e6a"></script>

Und es läuft! Juhuuu!!!

Das einzige an Verschiebung, was noch auftritt ist, dass wenn man weiter fortgeschritten in der Buchung ist, und dann auf "Zurück" klickt. Dann wird der Inhalt wieder nach oben versetzt geladen, ist aber wenigstens noch halbwegs sichtbar. Damit kann ich leben, was soll's... 😉

PS: Ich habe festgestellt, dass die Vorschau des Webdesigners und auch die Firefox-Vorschau keine korrekte Anzeige des Iframes liefert!!! Im WD wurde mir das Formular teils abgeschnitten angezeigt. Beim Firefox war es so, dass wenn man auf "Zurück" im Buchungsprozess geklickt hat, die Hauptkategorien nicht mehr voll geladen wurden (Es waren dann nur noch 3 von 7 zu sehen).

Nach dem Upload auf den Server gibt es solche Fehler nicht mehr.

Danke für den tollen Support 🌻🌸🌻🌸💐
Ich freu mich riesig, dass ich es einbinden konnte 😊

[...] Ich habe festgestellt, dass die Vorschau des Webdesigners und auch die Firefox-Vorschau keine korrekte Anzeige des Iframes liefert! [...]

Das ist ein "Fehler", der eigentlich keiner ist. 😉
Magix weist in der Doku zum Programm an verschiedenen Stellen darauf hin, dass die im Prog. enthaltene Vorschau Option von der "echten" Darstellung in einem externen Browser abweichen kann. Das betrifft in erster Linie den im WD integrierten, abgespeckten Internet Explorer 11, aber auch, wenn auch weniger stark, die über die Vorschau zu öffnenden Browser, die Du auf dem PC installiert hast.

Wie Du selbst festgestellt hast, ist die beste Testmethode immer noch der lokale Export oder der Upload des Projekts, mit einem anschließenden Test der Seiten in einem vollständig installierten Browser... 😊

Aha, gut zu wissen 👍

Mann/Frau lernt ja nie aus 😄

Hallo zusammen,

ich mal wieder 😄

Mal wieder hänge ich an einem Problem mit diesem Iframe und dem Buchungsmodul fest und hoffe, dass ich es mit der Hilfe hier irgendwie lösen kann.

Wie oben beschrieben, habe ich ein generelles Buchungsmodul bei mir in die Seite integriert, indem ich eine externe Booking.html Seite erstellt und verlinkt habe.
Das klappt jetzt auch ganz wunderbar.

Nun habe ich aber folgendes Problem:
Normal eingefügte Iframe-Codes werden nicht in beiden Versionen angezeigt- nur entweder/oder

Ich möchte auf meinen Unterseiten auch einzelne, bestimmte Terminarten buchbar machen, (Also nicht alle Terminarten auf einer Seite zum Scrollen, wie bei der bereits erstellten Booking-Seite, sonder nur 2 Termine zum wählen-ohne Scrollfunktion)

Hierfür bietet Onlinetermine.com auch eine ganz wunderbare Möglichkeit.
Für einzelne Terminvarianten kann ich ganz neue Iframes und passende Codes erstellen.

Da ich ja bei einer Auswahl von nur 2 Terminen keine Scrollbalken brauche, dachte ich mir, dass ich einfach den Iframe-Code einfügen kann, einmal im Platzhalter der Desktop-Version und einmal in der mobil-Version.

So einen Code meine ich:

<script type="text/javascript" src="https://satellite.booking-time.com/?js=3ad16056afb9ed83"></script>

Zu meiner Enttäuschung habe ich festgestellt, dass wenn beide Platzhalter - Desktop und mobil - diesen Code tragen, der Iframe in der mobilen Version einfach nicht angezeigt wird. Dort ist nur leerer Raum zu sehen, sonst nichts. Wenn ich den Iframe nur in die Mobilversion einfüge, wird er aber angezeigt und alles läuft.

Es geht halt nicht beides und ich frage mich, warum das so ist...und ob es da eine Lösung gibt, beide Varianten mit dem gleichen Code anzuzeigen?

Wenn Du anstelle des einfachen JScript einen vollständigen iframe Code benutzt und den auf den Seiten der Varianten in einen geeigneten Platzhalter einbindest, dann klappt's... 😉

<iframe src="https://satellite.booking-time.com/?key=3ad16056afb9ed83&amp;initialWidth=310&amp;
childId=bookingtimeSatelliteIframe_3ad16056afb9ed83&amp;
parentTitle=index&amp;
parentUrl=http%3A%2F%2Flocalhost%3A8000%2Fvirtb9e82cf2%2Findex.htm" scrolling="no" 
marginheight="0" sandbox="allow-scripts allow-same-origin allow-popups" width="100%" 
height="576px" frameborder="0">
</iframe>