Alterando iframe src com Javascript

94

Estou tentando mudar um <iframe src=... >quando alguém clica em um botão de rádio. Por algum motivo, meu código não está funcionando corretamente e estou tendo problemas para descobrir o porquê. Aqui está o que eu tenho:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
  <title>Untitled 1</title>

  <script>
  function go(loc) {
    document.getElementById('calendar').src = loc;
  }
  </script>
</head>

<body>
  <iframe id="calendar" src="about:blank" width="1000" height="450" frameborder="0" scrolling="no"></iframe>

  <form method="post">
    <input name="calendarSelection" type="radio" onselect="go('http://calendar.zoho.com/embed/9a6054c98fd2ad4047021cff76fee38773c34a35234fa42d426b9510864356a68cabcad57cbbb1a0?title=Kevin_Calendar&type=1&l=en&tz=America/Los_Angeles&sh=[0,0]&v=1')" />Day
    <input name="calendarSelection" type="radio" onselect="go('http://calendar.zoho.com/embed/9a6054c98fd2ad4047021cff76fee38773c34a35234fa42d426b9510864356a68cabcad57cbbb1a0?title=Kevin_Calendar&type=1&l=en&tz=America/Los_Angeles&sh=[0,0]&v=1')" />Week
    <input name="calendarSelection" type="radio" onselect="go('http://calendar.zoho.com/embed/9a6054c98fd2ad4047021cff76fee38773c34a35234fa42d426b9510864356a68cabcad57cbbb1a0?title=Kevin_Calendar&type=1&l=en&tz=America/Los_Angeles&sh=[0,0]&v=1')" />Month
  </form>

</body>

</html>
Expandir trecho

javascript  iframe  src 
— Shinjuo
fonte
@Pekka É por isso que é um comentário.
— mbq
@mbq não, quero dizer, é uma péssima ideia neste cenário. O OP parece estar incorporando código de um serviço externo. Você não pode buscar isso usando AJAX em primeiro lugar por causa da segurança entre domínios e, mesmo se pudesse, ter o HTML e colocá-lo em um DIV não funcionaria, porque ele poderia conter referências relativas a imagens e folhas de estilo e tal. Eu acho que os IFrames realmente devem ser acessados ​​aqui
— Pekka,
@Pekka eu concordo; Eu perdi aquela parte do serviço remoto. Excluí meu comentário para não confundir as pessoas.
— mbq
POR QUE DOSE NÃO FUNCIONA o código acima em nenhum navegador ????
— harix

Respostas:

125

Neste caso, provavelmente é porque você está usando os colchetes errados aqui:

document.getElementById['calendar'].src = loc;

deveria estar

document.getElementById('calendar').src = loc;
— Pekka
fonte
11
@shinjuo onselectnão é o atributo correto a ser usado aqui. Você pode querer usar onclick- note que isso não irá disparar se o usuário usar o teclado
— Pekka
Isso é o que era. Obrigado. A razão pela qual escolhi selecionar é porque pensei que, se alguém abaixasse e pressionasse a
— barra de
@shinjuo sim, é uma boa ideia. Eu acho que você teria que usar alguma variação de onchangepara isso.
— Pekka,
2
"onclick" funciona para o teclado. Não há evento "onselect".
— Aaron D
@Aaron há um evento onselect não padrão, mas é para selecionar texto. Se onclickfuncionar para ligar / desligar um botão de rádio, está tudo resolvido, ótimo!
— Pekka,
61

Talvez isso possa ser útil ... É html simples - sem javascript:

<p>Click on link bellow to change iframe content:</p>
<a href="http://www.bing.com" target="search_iframe">Bing</a> -
<a href="http://en.wikipedia.org" target="search_iframe">Wikipedia</a> -
<a href="http://google.com" target="search_iframe">Google</a> (not allowed in inframe)

<iframe src="http://en.wikipedia.org" width="100%" height="100%" name="search_iframe"></iframe>
Expandir trecho

A propósito, alguns sites não permitem que você os abra no iframe (motivos de segurança - clickjacking)

— Inemanjá
fonte
2
Poderia explicar por que " google.com " não é permitido no inframe e algum conselho para disponibilizá-lo (não deve ser iframe, mas de forma semelhante)? Agradeço muito.
— Qibiron Who de
1
@ hikaru89 esta é uma resposta tardia ... Você não pode simplesmente "disponibilizá-la". Não é permitido em iframes propositalmente. O Google faz isso por vários motivos por conta própria.
— Senhor SirCode
18

Esta é a maneira jQuery de fazer isso:

$('#calendar').attr('src', loc);
— Jim Clouse
fonte
8

O onselectdeve seronclick . Isso funcionará para usuários de teclado.

Também recomendaria adicionar <label>tags ao texto "Dia", "Mês" e "Ano" para facilitar o clique. Código de exemplo:

<input id="day" name="calendarSelection" type="radio" onclick="go('http://calendar.zoho.com/embed/9a6054c98fd2ad4047021cff76fee38773c34a35234fa42d426b9510864356a68cabcad57cbbb1a0?title=Kevin_Calendar&type=1&l=en&tz=America/Los_Angeles&sh=[0,0]&v=1')"/><label for="day">Day</label>

Também recomendo remover os espaços entre o atributo onclicke o valor, embora possam ser analisados ​​pelos navegadores:

<input name="calendarSelection" type="radio" onclick = "go('http://calendar.zoho.com/embed/9a6054c98fd2ad4047021cff76fee38773c34a35234fa42d426b9510864356a68cabcad57cbbb1a0?title=Kevin_Calendar&type=1&l=en&tz=America/Los_Angeles&sh=[0,0]&v=1')"/>Day

Deveria estar:

<input name="calendarSelection" type="radio" onclick="go('http://calendar.zoho.com/embed/9a6054c98fd2ad4047021cff76fee38773c34a35234fa42d426b9510864356a68cabcad57cbbb1a0?title=Kevin_Calendar&type=1&l=en&tz=America/Los_Angeles&sh=[0,0]&v=1')"/>Day
— Aaron D
fonte
2
@nalply - Não entendo o seu voto negativo. A raiz do problema não são os espaços, que eu disse que deveriam ser alterados. O problema é que o onselect deve ser onclick. Observe também que a outra resposta de Pekka não resolve o problema. Vou reordenar minha resposta para torná-la mais clara.
— Aaron D
Removi o downvote porque sua nova edição está mais clara do que antes.
— aproximadamente
6

Isso também deve funcionar, embora o srcpermaneça intacto:

document.getElementById("myIFrame").contentWindow.document.location.href="http://myLink.com";
— Aram Paronikyan
fonte
3
Isso não funcionará quando a página no iframe estiver em um domínio diferente.
— Frederic Leitenberger
2

Aqui está meu código atualizado. Funciona bem e pode ajudá-lo.

<head>
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
  <title>Untitled 1</title>
  <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
  <script type="text/javascript">
  function go(loc) {
    document.getElementById('calendar').src = loc;
  }
  </script>
</head>

<body>
  <iframe id="calendar" src="about:blank" width="1000" height="450" frameborder="0" scrolling="no"></iframe>

  <form method="post">
    <input name="calendarSelection" type="radio" onclick="go('http://calendar.zoho.com/embed/9a6054c98fd2ad4047021cff76fee38773c34a35234fa42d426b9510864356a68cabcad57cbbb1a0?title=Kevin_Calendar&type=1&l=en&tz=America/Los_Angeles&sh=[0,0]&v=1')" />Day
    <input name="calendarSelection" type="radio" onclick="go('http://calendar.zoho.com/embed/9a6054c98fd2ad4047021cff76fee38773c34a35234fa42d426b9510864356a68cabcad57cbbb1a0?title=Kevin_Calendar&type=1&l=en&tz=America/Los_Angeles&sh=[0,0]&v=1')" />Week
    <input name="calendarSelection" type="radio" onclick="go('http://calendar.zoho.com/embed/9a6054c98fd2ad4047021cff76fee38773c34a35234fa42d426b9510864356a68cabcad57cbbb1a0?title=Kevin_Calendar&type=1&l=en&tz=America/Los_Angeles&sh=[0,0]&v=1')" />Month
  </form>

</body>

</html>
— KBH
fonte
0

mudar onselectpara onchangenas entradas e usar

calendar.src = loc

Exibir trecho de código

— Kamil Kiełczewski
fonte
-1

Você pode resolver isso criando o iframe em javascript

  document.write(" <iframe  id='frame' name='frame' src='" + srcstring + "' width='600'  height='315'   allowfullscreen></iframe>");
Expandir trecho
— daniel yanovsky
fonte
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.