iFrame und Aktualisierung

[pinky]

Hallo zusammen,

ich habe mal eine Frage bzgl. eines einzubindenden iFrames. Wenn ich mir von OpenStreetMap eine Karte generiere und diese per iFrame einbinde, dann wird der Ausschnitt nicht korrekt geladen. Es wird quasi so weit herausgezoomt, dass mir die Welt statt des Ausschnitts angezeigt wird. Lasse ich den iFrame reloaden, dann stimmt alles.

Hat jemand einen Rat dazu?

Code: Alles auswählen

<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://www.openstreetmap.org/export/embed.html?bbox=9.955345988273622%2C53.54894237916903%2C9.958886504173279%2C53.55033515976242&amp;layer=mapnik" style="border: 1px solid black"></iframe><br/><small><a href="https://www.openstreetmap.org/#map=19/53.54964/9.95712">Größere Karte anzeigen</a></small>

Viele Grüße

[Tommy Herrmann]

Moin,

also ich habe so eine Karte selbst noch nie eingebaut - müsste ich erst einmal machen.

Ich habe dagegen diese Karte von "Dr. DSGVO" mal getestet:

https://www.mobirise-tutorials.com/Test ... html#Karte

die ja auch "OpenStreetMap" verwendet. Da wird da sogleich korrekt angezeigt. Vielleicht hilft Dir das ja schon weiter.


P.S.:

Bei mir sieht Deine Seite so aus - ohne die Seite neu zu laden:

[Tommy Herrmann]

... ich baue das gleich mal in meine Tutorial-Seiten ein. Das hatte ich ohnehin noch vor.

[pinky]

Vielen Dank für die schnelle Antwort.

Bei mir sieht es so aus, wenn ich den iFrame wie oben angezeigt eingebe:

Ein Tutorial wäre toll.

[Tommy Herrmann]

... ich glaube ich weiß jetzt was Du meinst.

Die Karte wird nur nicht korrekt nach dem lokalen Publizieren angezeigt - am Server dann schon.

Ich habe das jetzt hier auch mal eingebaut:

https://www.mobirise-tutorials.com/OpenStreetMap.html

Es kann auch am Browser liegen, der noch einen falschen Cache gespeichert hat. Löschen den Cache oder erneuere diesen mit der Tastenkombination:

Strg + F5

an vielen Laptops mit einer "Fn" Taste dann:

Strg + Fn + F5

[pinky]

Super, vielen Dank.

[Tommy Herrmann]

... jetzt habe ich das auch - aber anscheinend nur im Firefox-Browser

[pinky]

Nachdem ich den Cache gelöscht hatte, wurde mir Dein Beispiel korrekt angezeigt. Nach einem Reload kam das:

Beim Firefox, Chrome und unabhängig am Mac im Safari.

[Tommy Herrmann]

Ich habe mich gerade mal bei denen im Forum angemeldet und gefragt.

https://community.openstreetmap.org/t/k ... erden/4729

[pinky]

Danke, da bin ich mal gespannt woran das liegen könnte. Ich habe schon gedacht, dass ich zu blöde bin einen Quellcode einzufügen .

[Klaus]

... jetzt hab ichs auch, sieht nach Cache Problem aus.

[pinky]

... jetzt hab ichs auch, sieht nach Cache Problem aus.

Ich habe es schon damit versuch, nur hilft dies auch nicht.

Code: Alles auswählen

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="cache-control" content="no-cache">

[Tommy Herrmann]

Also an diesem Iframe kann man doch gar nichts falsch machen

... ich glaube da muss ein Problem mit deren Datenbank sein. Mal abwarten.

... antworten tut in deren Forum auch keiner

[pinky]

Der Witz ist, dass wenn ich diesen iFrame in eine Seite packe, welche mit WordPress arbeitet, ist das überhaupt kein Problem. Genau der gleiche iFrame-Code.

[Tommy Herrmann]

ach ja - na dann gucke ich nochmals ...

[Klaus]

Normalerweise sind es die Cachedaten die vom Server kommen und an denen kann man ja selber nix machen wie hier:

etag: "be898a9793fbe4edda9af5789b9d0efa"
cache-control: max-age=113707, stale-while-revalidate=604800, stale-if-error=604800
expires: Sat, 29 Oct 2022 18:04:35 GMT

Ist aber gut möglich dass es einen Parameter gibt mit dem man das ändern kann, bzw. dass es an irgendwas von MR dann doch liegt dass es nicht funktioniert.

[Tommy Herrmann]

... es geht mit dem leeren Block "Code Editor"

... keine Ahnung warum. Irgend eine CSS von Mobirise kotzt ...

Ich muss noch weiter testen

[Klaus]

In dem iFrame wird von OpenStreetMap neben einem HTML auch ein JS geladen dass soviel ich verstanden habe recht ausgefeilt lazy loading erkennt und jenach dem ein Placeholderimage anzeigt, ggf. klappt das wegen irgendwelcher MR Sachen nicht.

[Tommy Herrmann]

So,

jetzt - nachdem ich mehrere Stunden damit verbracht habe, muss ich mal aufhören

Hunderte Mal hat es offline in einem "Code Editor Block" - ohne die ganzen Bootstrap-Klassen - funktioniert.

Nun plötzlich nicht mehr

https://www.mobirise-tutorials.com/OpenStreetMap.html

Ich habe dem "Code Editor Block" folgendes verpasst:

"HTML"

Code: Alles auswählen

<div>
                   <div class="abstand">
                            
                            <!-- Karte von OpenStreetMaps -->
                            <iframe class="inhalt" width="450px" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://www.openstreetmap.org/export/embed.html?bbox=12.738647460937502%2C52.232005085482115%2C14.111938476562502%2C52.78033921634272&amp;layer=mapnik" style="border: 1px solid black"></iframe><p class="inhalt"><small><a class="text-black" href="https://www.openstreetmap.org/#map=10/52.5070/13.4253">Größere Karte anzeigen&nbsp;<span class=" fa fa-external-link mbr-iconfont mbr-iconfont-btn"></span></a>&nbsp;&nbsp;&nbsp;<a class="text-black" href="javascript: location.reload();">Karte neu laden&nbsp;<span class="sli-reload mbr-iconfont mbr-iconfont-btn"></span></a></small></p>
                            
                   </div>
</div>

CSS:

Code: Alles auswählen

background-color: #bbbbbb;

.abstand {
    padding-top: 30px;
    padding-bottom: 80px;
}
@media (max-width: 767px) {
  .abstand {
   padding-top: 20px;
   padding-bottom: 20px;
   padding-left: 5px;
   padding-right: 5px;
  }
}

.inhalt {
    width: 992px;
    max-width: 100%;
    margin: 0 auto;
}

p {
  padding-top: 10px;
  color: #777;
}

Ich lasse das mal bis morgen so - ansonsten werde ich das wohl auf "normal" wieder zurückbauen.

Jetzt muss ich mich erst einmal um die neue v5.6.15 BETA kümmern und testen

[pinky]

Das Problem hängt bei mir mit der Option Lazy Load zusammen. Sobald ich diese Option deaktiviere, funktioniert der iFrame einwandfrei (allerdings möchte ich ungern auf Lazy Load verzichten).