Seite 1 von 1

IFRAME Code einbinden

Verfasst: Mo 27. Mär 2023, 13:56
von inno
Hallo,
wie kann ich am einfachsten einen IFRAME Code in Mobirise einbinden, der einen externen Inhalt lädt?

Code: Alles auswählen

<div id="apartmentIframeAll">
<script type="text/javascript" src="https://login.smoobu.com/js/Settings/BookingToolIframe.js"></script>
<script>BookingToolIframe.initialize({"url": "https://login.smoobu.com/de/booking-tool/iframe/123456", "baseUrl": "https://login.smoobu.com", "target": "#apartmentIframeAll"})</script>
</div>
Grüße

Re: IFRAME Code einbinden

Verfasst: Mo 27. Mär 2023, 15:46
von Tommy Herrmann
Ich weiß jetzt nicht was Du in einem Frame darstellen willst, nicht alles geht von externen Seiten, denn manchmal wird das auch unterbunden.

So sieht normalerweise das Iframe-Tag aus, dort gibt man lediglich die externe URL an:

https://www.w3schools.com/tags/tag_iframe.ASP

Was Du oben zeigst sind zwei JavaScripts - die so noch nicht funktionieren. Um dabei helfen zu können, müsstest Du uns mal einen Link zu den Anleitungen von "smoobu.com" senden.

https://www.smoobu.com/de/

Re: IFRAME Code einbinden

Verfasst: Di 28. Mär 2023, 09:45
von inno
Hallo Tommy, es wird ein externes Buchungstool geladen. Ich versuche es mal mit deinem Link! ;)
Wie baue ich den Code am besten ein?

Code: Alles auswählen

<iframe src="https://www.w3schools.com" title="W3Schools Free Online Web Tutorials"></iframe>

Re: IFRAME Code einbinden

Verfasst: Di 28. Mär 2023, 10:20
von Tommy Herrmann
Du kannst ein <iframe> Tag normalerweise nur für Inhalte der eigenen Domain verwenden.

Meist wird die Anzeige von Inhalten fremder Domains sonst aus Sicherheitsgründen gesperrt.

Das Iframe-Tag kannst Du an jeder beliebigen Stelle, in z.B. einen Textblock, einfügen - genau wie jedes andere Tag auch.


Wikipedia lässt das zu, versuche es mal damit zum Testen:

Code: Alles auswählen

<iframe src="https://de.wikipedia.org/wiki/Wikipedia:Hauptseite" title="Wikipedia" height="500px"></iframe>

Im Code-Editor (markierte Zeile):

Iframe im Textblock als Code.jpg


Ansicht Arbeitsseite Mobirise:

Iframe im Textblock.jpg



Das damit diese Buchungsseite von "smoobu.com" geladen werden soll ist mir schon klar :eek:

Ganz genauso könntest Du auch den eingangs von Dir gezeigten <div> Container mit den beiden JavaScripts einbauen - nur funktioniert der von Dir gezeigte Code so eben nicht, da dieser offensichtlich Fehler hat. Das hatte ich in meiner ersten Antwort versucht zu formulieren.

Re: IFRAME Code einbinden

Verfasst: Di 28. Mär 2023, 12:57
von inno
Hallo Tommy,
hier war die ID noch nicht vergeben. Jetzt sollte es passen.
Wie baue ich dann den kompletten Code ein, am besten auch ohne Scrollbalken, wenn da was in Tiefe geht?

Code: Alles auswählen

<div id="apartmentIframeAll">
<script type="text/javascript" src="https://login.smoobu.com/js/Settings/BookingToolIframe.js"></script>
<script>BookingToolIframe.initialize({"url": "https://login.smoobu.com/de/booking-tool/iframe/578140", "baseUrl": "https://login.smoobu.com", "target": "#apartmentIframeAll"})</script>
</div>
Danke und Grüße

Re: IFRAME Code einbinden

Verfasst: Di 28. Mär 2023, 14:30
von Tommy Herrmann
Ja - wie gesagt - ganz genauso.

... das ist aber eben kein Iframe-Code sondern ein JavaScript-Code, deshalb wird es dort auch keinen zusätzlichen Scrollbalken (wie beim Iframe) geben.

Da Du aber hier das <div> Tag außen herum hast, darf das nicht innerhalb eines <p> Tags </p> stehen.

Das <div> Tag steht für: division = Bereich

Das <p> Tag steht für: paragraph = Textabsatz

Ich habe hier als Beispiel einen ganz einfachen Text-Block aus der Rubrik "Article" verwendet:

Textblock aus Article.jpg


Du musst zumindest lokal publizieren, damit Du das Ergebnis sehen kannst. Auf der Arbeitsseite erscheint, nach dem Einbau im "Code Editor", nur ein [Hinweis] auf diese beiden verwendeten JavaScripts.

Siehe meine Screenshots:

Einbau im "Code Editor" (Dein Code ist markiert - unter dem <p> Tag </p>):

Formular Buchung im Code-Editor.jpg


Ansicht der Arbeitsseite von Mobirise nach dem Einbau vom Code mit [Hinweis] auf die verwendeten JavaScripts:

Formular Buchung auf Arbeitsseite.jpg


Nach dem (zumindest lokalen) Publizieren Ansicht im Browser:

Formular Buchung.jpg

Re: IFRAME Code einbinden

Verfasst: Di 28. Mär 2023, 15:19
von inno
Hi Tommy,
danke Dir! Kann ich leider erst morgen testen. Melde mich dann. :tu:
Grüße

Re: IFRAME Code einbinden

Verfasst: Mi 29. Mär 2023, 11:44
von inno
Hallo Tommy, funktioniert soweit, allerdings wird das Tool bei mir 2x angezeigt! Hast du hier eine Lösung? Screens anbei.

Re: IFRAME Code einbinden

Verfasst: Mi 29. Mär 2023, 11:50
von Tommy Herrmann
Das ist eigentlich nicht möglich - nicht mit dem Code, so wie im Screenshot von Dir gezeigt. Das passiert ja bei mir auch nicht.

Hast Du da vielleicht 2 x den gleichen Block untereinander eingebaut oder so etwas?

Wenn Du mal in ein Testverzeichnis publizieren würdest, dann könnte man das sofort im Quelltext vom Browser sehen. Ich kann keine Lösung haben, wenn ich nichts sehe :(

Re: IFRAME Code einbinden

Verfasst: Mi 29. Mär 2023, 11:54
von inno
Ist echt komisch!
Ich verwende das THEME LodgeM5.
Habe gerade eine leere Seite erstellt und trotzdem kommt es zweimal.
Ich teste es mal in einem anderen Theme - bin gepannt!

Re: IFRAME Code einbinden

Verfasst: Mi 29. Mär 2023, 11:58
von inno
Wenn ich das Theme komplett neu erstelle geht es! Mal schauen, wo der Fehler bei mir liegt!
Danke dir für die Infos + Hilfe! :tu:

Re: IFRAME Code einbinden

Verfasst: Mi 29. Mär 2023, 13:38
von inno
Ich habe den Fehler gefunden, wenn der Cookie Alert aktiv, dann wird es zweimal angezeigt!
Verrückt manche Sachen bei mobirise!

Re: IFRAME Code einbinden

Verfasst: Mi 29. Mär 2023, 15:14
von Tommy Herrmann
Hallo,

ja - das kann ich bestätigen - aber nur bei dem "Cookie Alert Nummer 1" - also dem ersten von oben gesehen.

Verwendest Du den "Cookie Alert Nummer 2" - den zweiten von oben - dann geht es. Ebenso geht es mit der dritten Option "Cookie Alert Nummr 3".

Das Formular wird dann überhaupt erst angezeigt, wenn man den Gebrauch der Cookies zugestimmt hat und dann auch nur 1 Mal. Diese Funktion solltest Du auch verwenden, denn der "Cookie Alert Nummer 1" macht gar nichts - außer einen Hinweis anzuzeigen, dass Deine Seite Cookies verwendet. Das ist so bei gewerblichen Seiten in der EU nicht erlaubt.

Das ist jedoch ein Bug (Software-Fehler) und das dürfte auf keinen Fall sein.

Es wäre sehr hilfreich, wenn Du das bitte dem Support melden würdest und dann mal berichtest. Am besten mit Link zu einer Testseite und Screenshot. Du kannst auch einen Link zu diesem Board hier in meinem Forum schreiben, sodass der Support das besser sehen und verstehen kann:

support@mobirise.com

Ich habe diesen Bug zusätzlich soeben im Hersteller-Forum gemeldet:

https://forums.mobirise.com/discussion/ ... alert-1/p1