Estou tentando alterar um iframe src quando alguém clica em um botão de opção. Por alguma razão, meu código não está funcionando corretamente e estou tendo problemas para descobrir o motivo. 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>Respostas:
95 para resposta № 1Nesse caso, é provavelmente porque você está usando os colchetes errados aqui:
document.getElementById["calendar"].src = loc;
deveria estar
document.getElementById("calendar").src = loc;
49 para resposta № 2
Talvez isso possa ser útil ... É simples html - 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>A propósito, alguns sites não permitem abri-los em iframe (motivos de segurança - clickjacking)
16 for answer № 3
Aqui está a maneira do jQuery de fazer isso:
$("#calendar").attr("src", loc);
6 para resposta № 4
o onselect devemos ser onclick. Isso funcionará para usuários de teclado.
Eu também recomendaria adicionar <label> tags no texto de "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>
Eu também recomendaria remover os espaços entre o atributo onclick e o valor, embora possa ser analisado 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
5 para a resposta № 5
Isso também deve funcionar, embora o src permanecerá intacto:
document.getElementById("myIFrame").contentWindow.document.location.href="http://myLink.com";
0 para a resposta № 6
Aqui está o 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>
-1 para resposta № 7
Você pode resolvê-lo criando o iframe em javascript
document.write(" <iframe id="frame" name="frame" src="" + srcstring + "" width="600" height="315" allowfullscreen></iframe>");