iframe

Başlatan ali, Ara 17, 2018, 12:27 ös

« önceki - sonraki »
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

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

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

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.

<!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>

Hallo,

vielen Dank für die schnelle Antwort und sorry, d ass ich mich jetzt erst melde. Ich habe es nun folgendermaßen eingebaut:
<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!