iFrame auf IOS mit Problemen?

FortunaFrankfurt schrieb am 13.05.2014 um 07:54 Uhr

Hi alle zusammen,

habe ne neue Homepage aufgezogen (http://www.fortuna-frankfurt.de)

Soweit bin ich sehr zufrieden, allerding wird das iframe für den Scrolltext auf dem iPad / iPhone nicht richtig dargestellt.

Es sprengt die Seite einfach und zeigt den gesamten Text an, anstatt nur die definierte Range mit Scrollbalken. Auf dem PC, sowie Android Geräten ist alles in Ordnung.

Folgendes ist im Body eingetragen

Anbei ma wie es aussieht auf dem iPad ...

P.S. Habe hier paar Beiträge gefunden die erklärt haben wie man iFrames einbindet und deren Beispielseiten haben aber auch das Problem anscheinend.

Hat sich was geändert? Kann ich ne Alternative nutzen?

Danke im voraus

Kommentare

marboe schrieb am 13.05.2014 um 12:12 Uhr

Hi, ich glaube dein Code ist falsch. Wo hast du den denn her? Gruß Martina

mysteria66 schrieb am 13.05.2014 um 13:28 Uhr

Hallo,

ziehe in dem Bereich wo das iFrame erscheinen soll in der entsprechenden Größe einen Platzhalter auf und hinterlege folgenden Quellcode (die Fett markierten Bereiche noch entsprechend anpassen):

<iframe style="margin-bottom: 0px; margin-left: 0px; border: 0px none; background-color:transparent; vertical-align:top;" align="left" src="seitennamen.htm" width="100%" height="100px" frameborder="0" scrolling="auto" title="IrgendEinName"></iframe>

Unter height muss die Höhenangabe in Pixel erfolgen (entsprechend der Höhe des Platzhalters bzw. der gewünschten Höhe). Für das Dokument welches eingebunden wird, würde ich auch keine Leerzeichen im Namen verwenden. Am besten nur "text.htm" und nicht "startseite - text.htm".

Zumindes sollte das externe Dokument dann sauber dargestellt werden. Beim iPad und iPhone hat man nur das Problem, dass kein Scrollbalken im iFrame dargestellt wird. Hier muss man sich ggf anders behelfen. Sollte jedoch kein Scrollbalken erforderlich sein, sollte eigentlich alles passen.

Gruß

FortunaFrankfurt schrieb am 13.05.2014 um 13:30 Uhr

Hi,

@Marboe

Habe den Code es aus diesem Forum ...

@ Mysteria

Danke dir vielmals - werde es gleich mal ausprobieren !

FortunaFrankfurt schrieb am 13.05.2014 um 13:45 Uhr

Leider das selbe Problem ... Der Textteil wird in die Länge gezogen und bleibt nicht in dem zugeteilten Bereich.

Auf meinem Android Smartphone, sowie PC mit IE, Firefox, Chrome kein problem - Da funktioniert es so wie es soll. Aber auf dem iPad & iPhone klappt die Darstellung nicht.

Muss ich evtl nicht iframe nehmen, sondern DIV ?

Kenne DIV nicht wirklich, aber habs hier mal im Forum gesehen ...

BeRo schrieb am 13.05.2014 um 14:37 Uhr

[...] Muss ich evtl nicht iframe nehmen, sondern DIV ? [...]

Ja, Du musst...

[...] Kenne DIV nicht wirklich [...]

Das lässt sich schnell ändern...

Wenn der hier dargestellte (scrollbare) Text auf Deinem I-Phone einwandfrei aussieht und gescrollt werden kann, dann kannst Du Dir hier die Anleitung für 2 verschiedene Versionen holen, wie eine DIV Box zur Textdarstellung angelegt- und eingebunden werden kann...

Viel Erfolg

mysteria66 schrieb am 13.05.2014 um 14:44 Uhr

Hi,

wenn nichts mehr geht ist BeRo zur Stelle .

Eigentlich sollte das Ganze auch mit dem iFrame funktionieren. Ich habe auf einigen meiner Seiten iFrames wie beschrieben hinterlegt und noch nie Probleme. Bis halt auf das Thema, dass der Safari Browser unter iOS leider den Scrollbalken nicht darstellt. Funktioniert auch nicht auf der Testseite von BeRo. Aber das ist wohl vielmehr ein Safari Problem unter iOS.

Gruß in die Runde

FortunaFrankfurt schrieb am 13.05.2014 um 16:14 Uhr

Danke BeRo,

habe es ma probiert es funktioniert-)

Nur 2-3 Sachen hierzu (Sorry)

Der Text wird wöchentlich geändert (Spielberichte) - Zudem würde ich halt gerne die Schriftart (Times New Roman) und die Farbe (hellgrau) beibehalten.

Kann ich den Text, wie bei nem iFrame, als seperate Seite anlegen und in dem Body dann den Pfad bzw Dateinamen angeben?

Damit wäre das Prob der Schriftart/Grösse/Farbe sehr easy gelöst und es ist ja einfacher als inmitten des HTML Body rumzumachen -)

FortunaFrankfurt schrieb am 13.05.2014 um 17:12 Uhr

@mysteria

iFrame wäre super wenns gehen würde (ist ja rcht easy eigentlich)

Woran kann es denn liegen das nur aufm iPhone / iPad es nicht funktioniert bzw falsch dargestellt wird?

BeRo sagte ja ich müsse DIV nehmen ... evtl ist es ja ein Prob seit IOS7 ... habe schon diverse Seiten gesehen indem iFrame vorgestellt wurde als Testseite wo auch nicht hinhaut.

BeRo schrieb am 13.05.2014 um 21:36 Uhr

[...] würde ich halt gerne die Schriftart (Times New Roman) und die Farbe (hellgrau) beibehalten [...]

Das ist kein Problem. Du kannst alle Arten von Formatierungen benutzen, die in HTML und/oder CSS möglich sind.
In diesem Thread habe ich in diversen Kommentaren die einzelnen Möglichkeiten erklärt.

[...] Kann ich den Text, wie bei nem iFrame, als seperate Seite anlegen und in dem Body dann den Pfad bzw Dateinamen angeben? [...]

Jein

Es gibt zwar Möglichkeiten, einen vergleichbaren Effekt mit CSS- und (mit Gewalt) auch mit PHP- und Object-Code-, etc. zu erreichen, aber das Ergebnis ist dann im harmlosesten Fall nicht valide. Außerdem kannst Du davon ausgehen, dass einige (beliebte) Browser nicht damit zurechtkommen.

[...] Damit wäre das Prob der Schriftart/Größe/Farbe sehr easy gelöst und es ist ja einfacher als inmitten des HTML Body rumzumachen [...]

Eine ähnlich komfortable Lösung kannst Du auch erreichen, wenn Du den HTML Code nicht (mühsam?) manuell eintippst/veränderst.
Benutze einfach einen externen Texteditor, der HTML Code erzeugen kann, wie z. B. MS Word. Damit kannst Du alle Textformatierungen WYSIWYG vornehmen

Den P-Tag des HTML Codes einer so erzeugten Seite kannst Du inkl. aller Formatierungen mit copy & paste 1:1 einfach in den HTML Body des Platzhalters im WD übernehmen.

Probier's mal und wenn noch Unklarheiten übrig geblieben sind, einfach wieder melden...

Viel Erfolg