Mudar "src" do iframe com um click?

Front-end
, ,
#1

Tenho uma página, na qual exibe um mapa pela tag iframe. No topo da pagina principal, tenho um menu (<li><a>menu</a></li>) e queria que ao clicar nesse menu, o iframe fosse recarregado com um src diferente, para eu poder exibir outro mapa.

Estou pensando em fazer isso com Jquery ou Js porém já tentei de algumas formas e não deu certo.

<main>
  <div id="mapa_google">
    <iframe class="mapa" src="http://mapaiframe.com"></iframe>
 </div>
</main>
#2

Bom deixa eu tentar entender, voce quer que seja exibido outro mapa ao clicar em uma opção do menu??

#3

Em javascript:
Defina uma id para o frame, e troque seu SRC via javascript exemplo:

<!-- Seu menu -->
<li><a href="javascript:getElementById('meuFrame').src='outroEndereco.html'">menu</a></li>

<!-- Seu frame -->
<main>
    <div id="mapa_google">
    <iframe class="mapa" id="meuFrame" src="http://mapaiframe.com"></iframe>
 </div>
</main>

Veja se te ajuda.
Abraços!

1 curtida
#4

Isso! Quero que ao clicar no link, seja carregada uma outra pagina(mapa) no iframe.

#5

Amigo, implementei esse código, porém não muda nada. Não sei se tem a ver com ter que recarregar o iframe, ou algo do tipo…

#6

Consegui resolver a Questão! Usei o seguinte código:

function go(loc) { document.getElementById('mapframe').src = loc; }

e setando go(‘www.mapa2.com’) no onclick do link.