Responsive Script

[th_wolfgang]

Hallo,

ich spiele mich seit zwei Tagen an einem Script welches „verspricht“ mir einen iFrame in der Höhe anzupassen. Jetzt funktioniert dies allerdings nicht, entweder sind die Abstände unter den geladen Seiten zu lang, oder werden abgeschnitten.

Ich habe wie hier: jQuery Plugin To Auto Adjust iFrame Height - setIframeHeight | Free jQuery Plugins

Meine JavaScripts eingebunden. Auch den Part Events, habe ich so eingebunden:

<script>
jQuery(window)

  // triggered whenever the iframe got shrinked
  .on('setIframeHeight:shrinked', function (e, data) {
      console.log('iframe shrinked', data);
      window.scroll(0,0);
  })

  // triggered whenever the iframe got enlarged
  .on('setIframeHeight:enlarged', function (e, data) {
      console.log('iframe enlarged', data);
  })

  // triggered whenever the deep link is changed
  .on('setIframeHeight:deepLink:changed', function(e, data) {
    console.lg(data);
  //  Object {childUrl: "/index.php", parentUrl: "/index.html"}
	
  }) 
</script>

Und beim iFrame in der Parentpage:

<!--iFrame Test-->
<iframe name="icontent"  width="100%" scrolling="no" 
src="/index.php" data-iframeAutoHeight-deepLinkPattern="/index.php"> ></iframe>

<!--iFrame Test-->

Kann hier ein Fehler ersehen werden? Ich spiele wie gesagt mit dieser Geschichte seit 30 Stunden rum und trete auf der Stelle. Evtl. kennt jemand eine andere BESSERE Lösung für mich und meine Problematik. Habe hier bereits etliche Scripte mit jQuery getestet und keines will so richtig... :/

Danke & LG Wolf der mit dem iFrame kämpft

 

[TecEye]

welchen browser nutzt du? Bau mal ne fiddle

 

[th_wolfgang]

Hallo TecEye,

Das Problem ist, da ich es bis her immer noch nicht geschafft habe, ist das „aus irgend einem Grund“ die iFrame Scripte die Höhe nicht automatisch anpassen was z.B. dieses hier auch verspricht. Ein Beispiel ich rufe im iFrame ein Dokument auf welches 400px lang ist, das funktioniert. Wenn ich danach ein Dokument aufrufe welches eine Länge von 700px hat, wird dies dann automatisch bei 400px abgeschnitten. Dann habe ich versucht den iFrame bei jedem Link-Klick permanent neu zu laden… aber dies scheint auch nicht zu funktionieren. Die Höhe wird nicht angepasst.

Hier mal das Script:

<script>
$('iframe').each(function() {
  this.contentWindow.location.reload(true);
});
	
</script>

Dank Dir & LG
Wolf

- - - Aktualisiert - - -

Hallo,

ich komme mit diesem Problem nicht weiter... hat denn keiner eine Idee. Langsam habe ich angst das die Seite eine Lebensaufgabe wird...

"

MEIN LEBEN UND DIE SEITE

Danke & LG
Wolf

 

[SteelWheel]

Auch auf die Gefahr hin, dass ich mich in die Nesseln setze, aber das geht nicht! iFrames und ein derart von Dir gewünschtes Verhalten (ohne Zutun) ist aus meiner Sicht aus mehreren Gründen gar nicht machbar. Allein der Umstand, dass Du in der parent-Seite (wo das iFrame drin ist) eine Höhe (bspw. via CSS) definierst oder den Browser dies entscheiden lässt. Wie soll bitte die im iFrame geladene Seite die neue Höhenangabe "hochreichen", damit das iFrame im parent sich neu ausrichtet?

Du könntest nun anfangen, das iFrame prozentual zu definieren (H x B in %). Allerdings bleibt es hierbei bei dem Problem, dass das iFrame erneut nicht größer werden kann.

Ein Weg, der mir jetzt - wenn es gar nicht anders gehen würde und Du das unbedingt haben musst - sehr aufwendig erscheint, aber bei einem "must-have" ... naja ... da Du "top-down" (vom parent ins iFrame) greifen kannst, könntest Du in der im iFrame geladenen Seite im Source (data-*, JavaScript, Kommentar o. ä.) die benötigte Höhe schlichtweg hinterlegen. Ist die Seite geladen, fragt Dein parent an, ob es so einen Wert im iFrame gibt. Falls ja, skaliert die Höhe des iFrames neu. Dass auch das nicht zwingend zuverlässig sein kann, liegt auf der Hand. Unter Umständen ließe sich auch nach der geladenen Seite die Höhe des Dokuments selbst erfragen. Da das aber im iFrame läuft, wäre ich skeptisch, dass der Wert korrekt ist und nicht nur die Abmessung des gültigen iFrame zurückliefert.

Ansonsten gibt es im Netz - weiß ich, weil vor Monaten selbst etwas ähnliches benötigt - ein Tutorial, was Dir erklärt, wie Du mittels YT-iFrame Deine eingebetteten Videos skalierst für Responsivität. Aber das Geheimnis ist ja keines: es geht nur mit %en.

Mein Ratschlag: keine iFrames benutzen.

Das war's von mir ...

 

[th_wolfgang]

Hallo,

dank dir, ja es funktioniert nicht! Ich werde jetzt den Inhalt festlegen und lange Dokumente Scrollen lassen. Sonst bin ich noch 2019 am basteln

LG Wolf

- - - Aktualisiert - - -

Hallo,

Hallo,
wegen meinem „großen“ Problem iFrame Responsive und automatische Anpassen der Höhe. Habe ich nach Tests von ca. 30 bis 40 Scripten, welche so etwas „versprochen“ haben, dies aber leider nicht funktionierte, noch einen letzten Test gewagt…! Da mir eher durch Zufall, bei einer Google suche noch ein neueres Script "untergekommen" ist.

…UND DIES FUNZT !!! Tagelang habe ich rumgespielt und wollte bereits bei meinem Psychiater wegen Frustration einen Termin beantragen… Aber jetzt kommt wieder Freude auf und der Blutdruck ist auch wieder im normalen Bereich.

Wer evtl. auch mal die Problematik haben sollte, hier der Link: https://github.com/davidjbradshaw/iframe-resizer und hier nocheinmal besser beschrieben...: http://davidjbradshaw.github.io/iframe-resizer/

LG Wolf

 

[SteelWheel]

Brrr ... wenn Du bereit bist, dieses Opfer zu bringen. Freut mich, dass Du eine für Dich passende Lösung gefunden hast - sogar ganz ohne psychologische Stütze.

 

[th_wolfgang]

Hallo,

leider musste ich mit dem Script einen Rückschlag erleiden, in meinem Firefox hat alles super funktioniert aber alle anderen Browser funktionierten nicht. Das Script hat viele Options Möglichkeiten, da blicke ich allerdings noch nicht so recht durch. Evtl. hat jemand Lust mit mir ein paar Test zu fahren. Ich bin eigentlich überzeugt das es auch in anderen Browsern funktionieren muss wenn es dann schon bei FF funktioniert, leider zu viele Optionen, separat fuer IE etc. etc.

Helft mir bitte ein wenig damit!

Danke & LG
Wolf