iframe

W

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
 
Lösung
Sprint
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...
Willi1234 hat gesagt.:
lauf einem anderen Forum kann man den Button ganz einfach mit

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

ausrichten.
Zum Vergrößern anklicken....
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:
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 :(
 
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.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück