iframe

Status
Dieses Thema wurde gelöst! Zur Lösung gehen…

Willi1234

Grünschnabel
Hallo zusammen,

hoffentlich kann mir hier jemand helfen. Und zwar habe ich folgenden iframe in der index.html eingebaut:


<iframe src="https://www.google.com/maps/embed?p...+Haigerloch!5e0!3m2!1sde!2sde!4v1461837544374" class="maps"></iframe>


Und nun möchte ich, dass wenn man die Homepage aufruft, dass der iframe blockiert ist und nur ein Button mit „Google Maps laden“ angezeigt wird. Sobald man auf den Button klickt soll dann die Google Maps Karte nachgeladen werden bzw. angezeigt werden.

Was muss ich für hierfür machen, dass dies endlich klappt?

Ich habe jetzt auch schon mehrer Foren durchforstet aber leider nichts passendes gefunden - ich hoffe einer von Euch kann mir helfen!

Liebe Grüße
 

Sprint

Erfahrenes Mitglied
Lad den iframe doch über ein kurzes Javascript in ein umgebendes DIV nach, und dieses Script rufst du über den Button auf.
 

Willi1234

Grünschnabel
Hallo,

vielen Dank für die schnelle Antwort. Nur leider bin ich totaler Anfänger und hab nicht viel Ahnung wie ich das umsetzten soll.
Kannst du es auf für einen blutigen Anfänger beschreiben :)

Liebe Grüße
 

Sprint

Erfahrenes Mitglied
Kann ich machen. Du solltest dich aber generell auch mit Javascript beschäftigen, da das immer wichtiger wird. Vor allem wenn du jQuery dazu nutzt, wird es relativ einfach, da dadurch die - meiner Meinung nach - etwas umständliche Schreibweise von JS deutlich vereinfacht.

Das ganze hier ist aber mehr als einfach. Im Body definierst du zum einen den Bereich, in dem der iFrame später hin soll. Ich hab ihn hier einfach "frame" genannt. Daneben brauchst du noch einen Button, der die JS Funktion aufruft.
Am Ende setzt du noch einen Script Teil. Ich habe hier noch einen jQuery Aufruf drin, den du nur brauchst, wenn du wenn du auch jQuery nutzen willst. Javascript selbst brauchst du nicht explizit einbinden.

Von dem Beispiel brauchst du nur eine Zeile! Ich hab nur beide zum besseren Vergleich drin gelassen. "getElementById" sagt JS, um welches Element es geht, hier also um das DIV "frame". Über "innerHTML" sagst du JS, was in das zuvor bestimmte Element eingesetzt werden soll.

HTML:
<!DOCTYPE html>

<html>
<head>
    <title></title>
</head>

<body>
    <input type="button" onclick="mapsframe();" value="Map aufrufen" />
    <div id="frame"></div>
</body>
<script src="js/jquery.min.js"></script>
<script>
    function mapsframe(){
        document.getElementById('frame').innerHTML = '<iframe src="https://www.google.com/maps/..." class="maps"></iframe>'; // JS
//      $('#frame').html('<iframe src="https://www.google.com/maps/..." class="maps"></iframe>'); // jQuery
    }
</script>
</html>
 

Willi1234

Grünschnabel
Hallo,

vielen Dank für die schnelle Antwort und sorry, d ass ich mich jetzt erst melde. Ich habe es nun folgendermaßen eingebaut:

Code:
<input type="button" onclick="mapsframe();" text-align="center" value="Google Maps aufrufen" />
                        
                        <script src="js/jquery.min.js"></script>
                        
                        <script><div id="frame"></div>
                        function mapsframe(){
                           $('#frame').html('<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d17443.843775504163!2d8.80997142521119!3d48.383135767778825!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4797552c7e5ca641%3A0x413ffea74504ef87!2sOsterstra%C3%9Fe+28%2C+72401+Haigerloch!5e0!3m2!1sde!2sde!4v1461837544374" class="maps">>'); //jQuery
                        }
                        </script>


Der Button wird nun richtig angezeigt aber leider passiert nichts wenn ich darauf klicke. Was habe ich falsch gemacht?

Liebe Grüße und schon einmal vielen vielen Dank!
 

Sprint

Erfahrenes Mitglied
Du hast da so einiges durcheinander geworfen. Die <script> Bereiche sollten ganz am Ende des Quelltextes, unterhalb des </body> platziert werden. Außerdem hast du das "frame" DIV innerhalb des JS Bereiches gesetzt. Da kann es natürlich nicht funktionieren.

Halte dich bitte genau an die Reihenfolge und Aufteilung, die ich in dem Beispiel verwendet habe. Dann sollte es auch klappen. Wenn du die jQuery Version benutzt, mußt du dir natürlich auch noch jQuery selbst runterladen. Den Aufruf mußt du dann auch noch entsprechend anpassen. Es muß also der Pfad zur .js Datei stimmen und auch der aufgerufene Dateiname muß evtl. angepaßt werden. Der muß nicht unbedingt "jquery.min.js" lauten.
 

Willi1234

Grünschnabel
Super, vielen Dank - jetzt habe ich es verstanden :)

Nun hätte ich aber noch gerne, dass wenn man auf den Button geklickt hat, dass dieser verschwindet und außerdem würde ich gerne alles zentriert ausrichten. Was muss ich dafür noch tun?

Liebe Grüße
 

Sprint

Erfahrenes Mitglied
Zum Verschwinden lassen mußt du dem Button selbst noch eine id verpassen und ihn nach dem Erscheinen des iFrames noch ausblenden. Das geht über jQuery auch ganz einfach. Such da mal nach hide(). Dann kannst du gleich auch noch etwas über die jQuery Schreibweise lernen und wie du z.B. bei Bedarf den Button auch wieder erscheinen läßt.

Die Zentrierung läuft über CSS. Das ist aber eine ganz andere Baustelle. Da CSS inzwischen aber genauso wichtig ist wie HTML, solltest du dich damit intensiv beschäftigen und erst einmal versuchen, das selber herauszufinden.;)
 

Willi1234

Grünschnabel
Also habe mich nun etwas reingelesen und lauf einem anderen Forum kann man den Button ganz einfach mit

Code:
<centre>
<input type="button"…
</centre>

ausrichten. Habe es probiert und es klappt auch. Ist wahrscheinlich nicht die "feine Englische Art" aber es erfüllt den Sinn und Zweck :)


Leider habe ich bezüglich des verschwinden lassen nichts gefunden :( Und in der Index.html habe ich auch kein hide() gefunden :(

Könntest du mir hier noch einmal helfen ?

Vielen Dank
 

Sprint

Erfahrenes Mitglied
Frag Google mal nach "jquery hide()". Da bekommst du jede Menge Treffer. Die Beschreibung der jQuery API selbst wird dich wahrscheinlich etwas überfordern, aber von w3schools.com gibt es eine sehr gute Seite mit dem Titel "Hide and Show". Sieh dir die mal an.

Centre geht zwar, aber du solltest dich doch mal mit CSS beschäftigen. Vor allem, wenn du vorhast, mehr als nur eine Seite zu bauen.
 
Status
Dieses Thema wurde gelöst! Zur Lösung gehen…