Próbuję zmienić iframe src, gdy ktoś kliknie przycisk radiowy. Z jakiegoś powodu mój kod nie działa poprawnie i mam problem z ustaleniem, dlaczego. Oto co mam:
<!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>Odpowiedzi:
95 dla odpowiedzi № 1W tym przypadku to prawdopodobnie dlatego, że używasz tutaj niewłaściwych nawiasów:
document.getElementById["calendar"].src = loc;
powinno być
document.getElementById("calendar").src = loc;
49 dla odpowiedzi nr 2
Może to może być pomocne... To zwykły html - bez javascriptu:
<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>Nawiasem mówiąc, niektóre strony nie pozwalają na otwieranie ich w iframe (względy bezpieczeństwa - clickjacking)
16 dla odpowiedzi nr 3
Oto sposób jQuery, aby to zrobić:
$("#calendar").attr("src", loc);
6 dla odpowiedzi № 4
The onselect musi być onclick. To zadziała dla użytkowników klawiatury.
Polecam również dodanie <label> tagi do tekstu „Dzień”, „Miesiąc” i „Rok”, aby ułatwić ich klikanie. Przykładowy kod:
<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>
Polecam również usunięcie spacji między atrybutem onclick i wartość, chociaż mogą być analizowane przez przeglądarki:
<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
Powinno być:
<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 dla odpowiedzi № 5
To również powinno działać, chociaż src pozostaną nienaruszone:
document.getElementById("myIFrame").contentWindow.document.location.href="http://myLink.com";
0 dla odpowiedzi № 6
Oto mój zaktualizowany kod. Działa dobrze i może ci pomóc.
<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 dla odpowiedzi № 7
Możesz to rozwiązać, tworząc iframe w javascript
document.write(" <iframe id="frame" name="frame" src="" + srcstring + "" width="600" height="315" allowfullscreen></iframe>");