Cambiar iframe src con Javascript

94

Estoy intentando cambiar un <iframe src=... >cuando alguien hace clic en un botón de opción. Por alguna razón, mi código no funciona correctamente y tengo problemas para averiguar por qué. Esto es lo que tengo:

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

javascript iframe src Shinjuo
fuente
@Pekka Por eso es un comentario.
mbq
@mbq no, quiero decir que es una muy mala idea en este escenario. El OP parece estar incrustando código de un servicio externo. No puede obtener eso usando AJAX en primer lugar debido a la seguridad de dominio cruzado, e incluso si pudiera, tener el HTML y ponerlo en un DIV no funcionaría, porque podría contener referencias relativas a imágenes y hojas de estilo y tal. Creo que los iframes son realmente lo que hay que hacer aquí
Pekka
@Pekka estoy de acuerdo; Extrañé esa parte del servicio remoto. Eliminé mi comentario para no confundir a la gente.
mbq
¿POR QUÉ DOSE'NT WORK código anterior en cualquier navegador ????
harix

Respuestas:

125

En este caso, probablemente se deba a que está usando los corchetes incorrectos aquí:

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

debiera ser

document.getElementById('calendar').src = loc;
Pekka
fuente
11
@shinjuo onselectno es el atributo correcto para usar aquí. Es posible que desee usar onclick, aunque tenga en cuenta que eso no se activará si el usuario usa su teclado
Pekka
Eso es lo que fue. Gracias. La razón por la que elegí el selecto es porque pensé que si alguien con pestañas y el espacio a través de golpe en vez de clic del ratón que sería aún cambiar
shinjuo
@shinjuo sí, esa es una buena idea. Sin embargo, creo que tendrías que usar alguna variación de onchangepara eso.
Pekka
2
"onclick" funciona para el teclado. No hay ningún evento "onselect".
Aaron D
@Aaron hay un evento onselect no estándar, pero es para seleccionar texto. Si onclickfunciona para encender / apagar un botón de radio, entonces todo está resuelto, ¡genial!
Pekka
61

Quizás esto pueda ser útil ... Es html simple, sin 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 fragmento

Por cierto, algunos sitios no le permiten abrirlos en iframe (razones de seguridad: clickjacking)

inemanja
fuente
2
¿Podría explicar por qué " google.com " no está permitido en inframe y algún consejo para que esté disponible (no debe ser un iframe, sino algo similar)? Te lo agradezco mucho.
Qibiron Who
1
@ hikaru89 esta es una respuesta tardía ... No puedes simplemente "hacerla" disponible. No está permitido en iframes a propósito, Google lo hace por muchas razones por su propia cuenta.
Mister SirCode
18

Aquí está la forma jQuery de hacerlo:

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

El onselectdebe haber onclick. Esto funcionará para usuarios de teclado.

También recomendaría agregar <label>etiquetas al texto de "Día", "Mes" y "Año" para que sea más fácil hacer clic en ellos. Código de ejemplo:

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

También recomendaría eliminar los espacios entre el atributo onclicky el valor, aunque los navegadores pueden analizarlo:

<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

Debiera ser:

<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
fuente
2
@nalply: no entiendo tu voto negativo. La raíz del problema no son los espacios, que dije que deberían cambiarse. El problema es que onselect debería estar onclick. También tenga en cuenta que la otra respuesta de Pekka no resuelve el problema. Volveré a ordenar mi respuesta para que quede más clara.
Aaron D
Eliminé el voto negativo porque tu nueva edición es más clara que antes.
nalply
6

Esto también debería funcionar, aunque srcpermanecerá intacto:

document.getElementById("myIFrame").contentWindow.document.location.href="http://myLink.com";
Aram Paronikyan
fuente
3
Esto no funcionará cuando la página del iframe esté en un dominio diferente.
Frederic Leitenberger
2

Aquí está mi código actualizado. Funciona bien y puede ayudarte.

<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
fuente
0

cambiar onselecta onchangeen insumos y uso

calendar.src = loc

Mostrar fragmento de código

Kamil Kiełczewski
fuente
-2

Puedes resolverlo haciendo el iframe en javascript

  document.write(" <iframe  id='frame' name='frame' src='" + srcstring + "' width='600'  height='315'   allowfullscreen></iframe>");
Expandir fragmento
daniel yanovsky
fuente