Cambiar iframe src con Javascript

Estoy intentando cambiar un iframe src cuando alguien hace clic en un botón de opción. Por algún motivo, mi código no funciona correctamente y tengo problemas para averiguar por qué. Aquí es lo que tengo:Cambiar iframe src con Javascript

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

Fuente

2010-09-16 shinjuo

@Pekka Es por eso que es un comentario. – mbq

@mbq no, quiero decir que es una muy mala idea en este escenario. El OP parece incluir código de un servicio externo. No se puede obtener eso usando AJAX en primer lugar debido a la seguridad entre dominios, e incluso si se pudiera, tener el HTML y ponerlo en un DIV no funcionaría, ya que podría contener referencias relativas a imágenes y hojas de estilo y tal. IFrames realmente es lo que necesita ir aquí. Creo que –

@Pekka estoy de acuerdo; Me perdí esa parte del servicio remoto. He borrado mi comentario para no confundir a las personas. – mbq

En este caso, es probable que sea porque está utilizando los soportes equivocadas aquí:

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

debería ser

document.getElementById('calendar').src = loc;

Fuente

2010-09-16 19:43:55

Lo cambié y todavía no funcionó. – shinjuo

+11

@shinjuo 'onselect' no es el atributo correcto para usar aquí.Es posible que desee utilizar 'onclick', aunque tenga en cuenta que no se activará si el usuario usa su teclado –

Eso es lo que era. Gracias. La razón por la que elegí en seleccionar es porque pensé que si alguien seleccionaba y hacía clic en el espacio en lugar de hacer clic en el mouse, aún cambiaría – shinjuo

El onselect debe ser onclick. Esto funcionará para usuarios de teclado.

También recomendaría agregar etiquetas <label> al texto de "Día", "Mes" y "Año" para que sea más fácil hacer clic en ellas. 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 la eliminación de los espacios entre el atributo onclick y el valor, aunque puede ser analizado por los 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

debe 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

Fuente

2010-09-16 19:50:28

No es cierto. http://stackoverflow.com/questions/828262 – nalply

@nalply - No entiendo tu downvote. El problema de raíz no son los espacios, que dije * deberían * cambiarse. El problema es que onselect debe estar en clic. También tenga en cuenta que la otra respuesta de Pekka no resuelve el problema. Reordenare mi respuesta para que quede más clara. –

Quité el downvote porque su nueva edición es más clara que antes. – nalply

Tal vez esto puede ser útil ... Es simple html - no 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>

Por cierto algunos sitios no permiten abrir en marco flotante (razones de seguridad - clickjacking)

Fuente

2013-07-11 14:57:19 inemanja

Esta es la forma jQuery para hacerlo:

$('#calendar').attr('src', loc);

Fuente

2013-12-24 14:50:34

Esto debería también funciona, aunque el src se mantendrá intacto:

document.getElementById("myIFrame").contentWindow.document.location.href="http://myLink.com";

Fuente

2014-10-14 00:13:30

Esto no funcionará cuando la página en el iframe se encuentre en un dominio diferente. –

-1

se puede resolver haciendo que el iframe en javascript

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

Fuente

2017-06-05 14:44:16

Respuesta

Cuestiones relacionadas