Scrollen innerhalb iFrame verhindern

[Nina]

Hallo an alle,

ich habe auf unserer Webseite einen iFrame für unsere Schulungsfolien eingebaut. Der iFrame soll den Zweck haben, dass sich aus der Domain nicht erkennen lässt, wie die letzte Folie heißen könnte und sich die Teilnehmer tatsächlich durch die Folien durcharbeiten müssen. Ob das schön und optimal ist sei dahingestellt. Mir geht es darum, dass ich nach einer Möglichkeit suche, das Scrollen innerhalb des iFrames komplett zu verhindern. mit den Anweisungen scrolling "no" und overflow:hidden habe ich den gewünschten Effekt zumindest in Edge und Opera noch nicht erreicht, Firefox zeigt mir dagegen genau den Abschnitt, den ich gerne hätte an.

Hat jemand hier vielleicht eine Idee?

Liebe Grüße Nina

[Felix Riesterer]

Liebe Nina,

Der iFrame soll den Zweck haben, dass sich aus der Domain nicht erkennen lässt, wie die letzte Folie heißen könnte und sich die Teilnehmer tatsächlich durch die Folien durcharbeiten müssen.

soll das bedeuten, dass im iFrame nur ein Ausschnitt einer Folie angezeigt wird? Oder ist der Ausschnitt die aktuelle Folie und ein Scrollen würde bereits zur nächsten Folie verweisen?

Ob das schön und optimal ist sei dahingestellt.

Da könnte man jetzt so viele andere Vorschläge machen... ;-)

Mir geht es darum, dass ich nach einer Möglichkeit suche, das Scrollen innerhalb des iFrames komplett zu verhindern.

Wie wäre es denn, andere Wege zu beschreiten, die nicht nur in einem Browser funktionieren?

mit den Anweisungen scrolling "no" und overflow:hidden habe ich den gewünschten Effekt zumindest in Edge und Opera noch nicht erreicht, Firefox zeigt mir dagegen genau den Abschnitt, den ich gerne hätte an.

Hast Du auch die mobilen Browser berücksichtigt? Wie sieht denn Dein iFrame aus, wenn man das in einem recht schmalen Viewport betrachtet?

Hat jemand hier vielleicht eine Idee?

Folien sind doch wie Bilder... Warum dann nicht eine klassische Bildergalerie? Die kann dann auf einen Knopfdruck hin zum nächsten Bild schalten, oder auch über einen Timer gesteuert werden. Und Bilder anzeigen können auch mobile Browser sehr vernünftig.

Liebe Grüße

Felix Riesterer

[Rolf B]

Hallo Nina,

Der iFrame soll den Zweck haben, dass sich aus der Domain nicht erkennen lässt, wie die letzte Folie heißen könnte

Das funktioniert nur für Personen, die nicht mit dem Browser umgehen können.

Alle anderen drücken die rechte Maustaste, untersuchen die Seite mit den Entwicklertools und finden alles, was sie brauchen.

Sinnvoll kann sein, die Folien "zufällig" zu benennen. Die Vorgänger/Nachfolger-Steuerung muss dann aber auf dem Server erfolgen, und zwar so, dass man erst weiter kommt, wenn eine Testfrage zur Folie korrekt beantwortet wurde. Andernfalls klickt man sich ja einfach stumpf durch.

Mir geht es darum, dass ich nach einer Möglichkeit suche, das Scrollen innerhalb des iFrames komplett zu verhindern.

Das ist jetzt eine andere Frage, oder? Mit dem Verstecken der URL hat das wohl nichts mehr zu tun.

Scrolling im iframe verhindern ergibt nur Sinn, wenn Du das Gerät festlegen kannst, auf dem die Folien angeschaut werden. Bei Schulungen kann das machbar sein, aber bei freier Endgerätewahl ist es nicht sinnvoll.

Mit passendem CSS innerhalb des iframe solltest Du Scrolllbars erfolgreich verhindern können. Dazu gehört nicht nur overflow:hidden, sondern für den Body auch margin:0 (sonst gibt's Scrollbars für die 8 Pixel des Margins) und height:100vh.

Wenn Du ein Dokument im iframe hast, das mehrere Seiten enthält, und Du nur einen bestimmten Ausschnitt davon anzeigen willst - hm, ich glaube, das geht nicht wirklich. Man kann bei gleichem Origin mit Javascript von der Hostseite aus in die iframe-Seite hineingreifen, und dann Teile auf hidden schalten. Schick ist anders.

Rolf

[Nina]

Hallo ihr Beiden,

die Antworten kamen ja ganz schön schnell. Danke dafür schon einmal.

Ich versuche, mein Anliegen nochmal etwas zu präzisieren: Die Idee wäre es, auf der Seite einen iFrame einzublenden, der den Inhalt von einer unser anderen Seiten genau so anzeigt, dass wir nur einen bestimmten Ausschnitt, also genau eine "Folie" sehen können. Dazu habe ich auch einen Anker auf der entsprechenden Seite gesetzt. Im Moment ist es so, dass mir der iFrame auch erstmals das anzeigt, was ich gerne hätte. Scrolle ich aber über diesen iFrame, wird mir logischerweise nicht nur der Abschnitt, sondern auch der Rest der eingebetteten Seite angezeigt, also quasi eine Seite in einer Seite. Die "Folien" selbst befinden sich auf jeweils separaten Seiten.

Der Vorschlag mit den Bildern ist mir tatsächlich auch schon gekommen, aber es findet währenddessen etwas Interaktion mit den Teilnehmern statt, weswegen es nicht auf ein einfaches Durchklicken rausläuft. Das lasse ich mir in jedem Fall noch einmal durch den Kopf gehen. Vielleicht finde ich einen Weg, wie ich das doch noch umsetzen könnte.

Die Scrollbalken tauchen bei mir erstmal auch nicht auf, nur wenn ich auf die Folie gehe und da scrollen würde, würde mir der ganze Inhalt der Seite angezeigt werden. Hierbei hatte ich die Hoffnung, dass ich das Scrollen komplett verhindern könnte.

Ich hoffe, ihr versteht meine Problematik? :D

Liebe Grüße Nina

[Rolf B]

Hallo Nina,

Ich hoffe, ihr versteht meine Problematik?

Ich verstehe das jetzt so, dass Du eine Anzahl von Seiten mit Folien hast. Dieser Seiten sind eigentlich gar nicht direkt für die Schulung gedacht, jedenfalls nicht für die Teilnehmer, und haben Bereiche, die für die Schulung irrelevant oder gar schädlich sind (z.B. Überschriften, Kopfzeilen, Navigation, Trainertext, Antworten auf gestellte Fragen, Footer, was auch immer) und die Du mit Hilfe des iframe verbergen möchtest. Das wird schwierig.

Frage ist: wieviel JavaScript kannst Du? Du könntest beim Laden der Seite die search Eigenschaft von window.location abfragen, und wenn ein bestimmter Parameter gesetzt ist, fügst Du dem Body eine Klasse hinzu (deren Name natürlich deinem Gutdünken unterliegt - beispielsweise presentation).

Mit Vorhandensein dieser Klasse kannst Du per CSS erreichen, dass die Teile der Seite, die man nicht sehen soll, auf display:none gesetzt werden. Damit werden sie nicht angezeigt und der Anwender kommt gar nicht erst in die Lage, an eine Stelle zu scrollen, die er nicht sehen soll.

body.presentation header,
body.presentation footer {
   display:none; 
}

body.presentation div.antworten {
   display:none; 
}

Einfach mal als Ideenskizze. Wenn der body die Klasse presentation hat, werden alle header, footer und ein div mit Klasse "antworten" ausgeblendet. Dein HTML wird anders aussehen und darum anderes CSS brauchen.

Nachteil: Das musst Du im Prinzip für jede Folienseite machen. Sind die Folienseiten einheitlich strukturiert, ist es eine einfache copy&paste Aktion. Wenn nicht, artet das in Arbeit aus. Wäre diese Idee eine Hilfe?

Rolf

[Nina]

Lieber Rolf,

das habe ich gesucht. Besten Dank dir! Ich werd mich gleich mal dran setzen. Der Rest der Seiten ist jetzt nicht schädlich, ich hätte nur dann, wie du auch schon geschrieben hast, Footer, Navigation etc. nochmals drinnen, was jetzt nicht sonderlich schön aussieht.

Vorteil ist, die Struktur ist tatsächlich dieselbe, d.h. Copy&Paste funktioniert hier optimal.

Ich melde mich nochmal, falls ich nicht weiterkomme.

Danke :)

Liebe Grüße Nina

[Felix Riesterer]

Liebe Nina,

es bleiben leider noch immer einige Fragen unbeantwortet:

1. Warum willst Du Inhalte einer anderen Seite einbetten?
2. Warum ist es keine Lösung, die Inhalte der "Folien" genau für diesen Zweck auf eine oder mehrere Seiten zu packen, wo sie als der tatsächliche Seiteninhalt zu erreichen sind?
3. Welcher Art ist die "Interaktion mit den Teilnehmern", die reine Bilder als Folien ungenügend machen?

Ich hoffe, ihr versteht meine Problematik? :D

Nein! Ich sehe nur, dass Du Dir eine ganz gezielte technische Lösung (iFrame) für Dein Problem in den Kopf gesetzt hast, die dieses offensichtlich ungenügend löst, und nun nach wenig vielversprechenden Reparaturhilfen suchst, anstatt einen sinnvolleren Lösungsansatz zu finden.

Liebe Grüße

Felix Riesterer

[Linuchs]

Hallo Nina,

was immer du auch ein- oder ausblendest in einem iframe, es kann doch locker umgangen werden durch

Rechte Maustaste > Aktueller Frame > Frame im neuen Tab öffnen.