iframe


Status
Dieses Thema wurde gelöst! Zur Lösung gehen…
#1
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
 
#3
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
#4
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>
 
#5
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
#6
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.
 
#7
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
#8
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.;)
 
#9
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
#10
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.
 

basti1012

Erfahrenes Mitglied
#11
lauf einem anderen Forum kann man den Button ganz einfach mit

Code:
<centre>
<input type="button"…
</centre>
ausrichten.
Das ist aber dann ein Sch... Forum.Jeder der sich etwas auskennt wird dir das so nicht empfehlen. Wie schon gesagt wurde , macht man das heute alles mit css und der veraltete html Code benutzt man nicht mehr. Ich kann dir nur empfehlen das du es gleich richtig machen solltest und erst gar nicht mitden veralteten Kram anfängst.

Und man sollte vieleicht überlegen ob man für eine Zeile JS wirklich jquery einbinden will?
Für die eine Zeile ist es etwas viel.
Fals jquery sowieso benutzt wird dann ok
 
Zuletzt bearbeitet:
#12
Schaut mal ich habe es jetzt so eingebunden aber leider funktioniert es immer noch nicht :(

Code:
<head>
<script>$("#button").click(function(){<br>
                        $("p").hide();});</script>
    
</head>

<body>
    <div>
    <input type="button" onclick="mapsframe();" value="Google Maps laden" />
    <div id="frame"></div>
</body>

<script>               
    function mapsframe(){
    document.getElementById('frame').innerHTML = '<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"></iframe>';
                        }
                        </script>   
    
</html>
Was mach ich den falsch? Ich kapier jetzt gar nichts mehr :(
 

Sprint

Erfahrenes Mitglied
#13
Zum einen hast du wieder einen Teil vom JS Code im head. Das geht zwar, sollte aber aus Performance Gründen immer besser am Seitenende stehen.

Dann verwendest du für den iFrame jetzt die reine JS Variante, für den Button aber jQuery. Das selbst wird aber nicht geladen.

Als drittes hat der Button keine id, die es aber immer braucht, um ihn ansprechen zu können.

Und als viertes brauchst du den Button nicht auf eine click Funktion zu legen. Schau dir nochmal das hide() Beispiel auf der w3schools.com Seite an. Dazu reicht eine Zeile, die dann in die Funktion mapsframe() unter die Einblendung des iFrames kommt.

Dann hat ein <br> nichts in einem JS Statement zu suchen und zuletzt mußt du auch den Button ausblenden und ich einen Paragraphen (p).

Nimm dir nochmal mein Beispiel vom Anfang, versuch es zu verstehen und dann erweitere es. In der jQuery Version mußt du nur den Button erweitern und eine JS Zeile hinzufügen.
 
Status
Dieses Thema wurde gelöst! Zur Lösung gehen…