Answered

IFrame für Website: Mobil funktioniert die Größenanpassung nicht

S
Rang

Hallo zusammen,

wir haben den iFrame Code auf unserer Website implementiert.
In der Desktop-Ansicht funktioniert auch soweit alles - Mobil adaptiert die Website die Größe aber nicht, sodass die Jobs nicht wirklich darstellbar sind.
Wir haben folgenden Code genutzt:
 

<iframe id="personio-iframe" style="border: none;" src="https://baverma.jobs.personio.de/" width="100%"></iframe>

<script>
  window.addEventListener('message', function(e) {
    var iframe = document.querySelector('#personio-iframe');
    var eventName = e.data[0];
    var data = e.data[1];
    switch(eventName) {
      case 'setHeight':
        iframe.style.height = data + 'px';
        break;
    }
  }, false);
</script>

 

Welche Anpassungen an dem Code habt ihr getätigt, um die mobile Darstellung auch korrekt zu ermöglichen?
Vielen Dank und freundliche Grüße

icon

Beste Antwort von Lena 11 August 2022, 09:16

Zum Originalpost

7 Antworten

Lena
Rang
Benutzerebene 7
Abzeichen +22

Hi @Stadeale,

hast Du dies selbst eingebunden, oder hat das jemand für Euch gemacht?

Es wäre klasse, wenn sich jemand aus der Community meldet, wie sie das gemacht haben! :) 

Weitere allgemeine Informationen zur Einbettung des iFrames findest Du hier in unserem Developer Hub, dort sind alle Informationen, für welche man einen Code benötigt hinterlegt. Im Discussions-Bereich vom Developer Hub können auch Code spezifische Fragen gestellt werden. Unsere Entwickler und Produkt-Manager antworten selbst darauf. :)

Liebe Grüße
Lena

S
Rang

Hi @Lena, vielen Dank für die Rückmeldung und den Tipp!
Ich habe die Frage im Developer Hub gestellt: IFrame for website: Mobile resizing does not work (personio.de)

Den Code haben wir selbst angepasst und eingebaut - Mobil haben wir einiges ausprobiert - Bisher aber keine Lösung gefunden.

Lena
Rang
Benutzerebene 7
Abzeichen +22

Hi @Stadeale,

lieben Dank für den Link zu Deiner Anfrage. Ich erkundige mich intern, auf was man hier noch achten muss. :) 

Liebe Grüße
Lena

S
Rang

Hi @Lena ,
super - Der EntwicklerHub hat mich zum Support weitergeleitet, welcher mir heute mitgeteilt hat, dass solch ein Codereview nicht angeboten wird, aber mal geschaut wird, ob dies künftig im Backlog hinterlegt wird. 
Schade - Vielleicht hat jemand aus der Community ja eine Lösung.

Lena
Rang
Benutzerebene 7
Abzeichen +22

Hi @Stadeale,

ich leite das an unsere Entwickler weiter, dass sie sich das ansehen. 

Auf den ersten Anlauf konnte mir meine Produkt-Ansprechpartnerin leider nicht weiterhelfen. Sobald ich eine Rückmeldung von unseren Frontend-Entwicklern habe, melde ich mich hier im Thread oder in einer Privatnachricht bei Dir, je nachdem wie allgemein die Lösung ist. :) 

Liebe Grüße
Lena

Lena
Rang
Benutzerebene 7
Abzeichen +22

Hallo @Stadeale,

ich möchte Dir ein Update von unserem Produkt geben, unser Entwicklungsteam hat das Ticket bei sich aufgenommen und sie werden es ansehen. Es wird jedoch noch ein wenig dauern, bis sie die Kapazität dazu haben.

Solltet ihr es in der Zwischenzeit lösen, gib mir bitte ebenso Bescheid, damit ich es weitergeben kann. :) 

Vielen Dank für Dein Verständnis. :) 

Liebe Grüße
Lena

Lena
Rang
Benutzerebene 7
Abzeichen +22

Hallo @Stadeale,

unser Produkt Team konnte identifizieren, woran es liegt. 😊

Sie habe herausgefunden, dass Ihr zwei iframes implementiert habt, anstatt eines, was empfohlen wird. 

Das Problem liegt darin, dass durch die Verwendung von zwei iframes mit demselben eindeutigen Bezeichner (id="personio-iframe") die Funktion zur Anpassung der iframe-Höhe je nach Gerät nur für die erste Begegnung des iframes ausgelöst wird, die auf Desktop-Geräten verwendet wird.

Daher gibt es nichts, was wir von unserer Seite aus tun können, um dieses Problem zu lösen, und wir empfehlen dringend, nur einen iframe sowohl für mobile als auch für Desktop-Geräte zu verwenden, damit alles für Euch richtig funktioniert. Wenn Ihr die zweite Instanz des iframe entfernt und nur eine für beide Gerätetypen beibehaltet, wird der iframe die Höhe auf jeden Fall auf Mobil- und Desktopgeräten richtig anpassen.

Ich hoffe ihr könnt es so lösen. Ich freue mich auf Deine kurze Rückmeldung. :) 

Liebe Grüße
Lena

Deine Antwort


Nutzungsbedingungen für die Personio Voyager Community