Изменение iframe src с Javascript

Я пытаюсь изменить iframe src, когда кто-то нажимает на переключатель. По какой-то причине мой код работает некорректно, и мне трудно понять, почему. Вот что у меня есть:Изменение iframe src с 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>

источник

2010-09-16 shinjuo

@Pekka Вот почему это комментарий. – mbq

@mbq нет, я имею в виду, что это очень плохая идея в этом сценарии. Кажется, что ОП внедряет код из внешней службы. Вы не можете получить это с использованием AJAX в первую очередь из-за безопасности междоменной безопасности, и даже если бы вы могли, наличие HTML и помещение его в DIV не помогло бы, поскольку оно могло содержать относительные ссылки на изображения и таблицы стилей и например. IFrames действительно то, что нужно здесь, я думаю –

@Pekka Согласен; Я пропустил эту часть удаленной службы. Я удалил свой комментарий, чтобы не путать людей. – mbq

В этом случае, вероятно, это потому, что вы используете неправильные скобки здесь:

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

должен быть

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

источник

2010-09-16 19:43:55

Я изменил его, и он все еще не работал. – shinjuo

+11

@shinjuo 'onselect' не является правильным атрибутом для использования здесь.Возможно, вы захотите использовать 'onclick' - обратите внимание, что это не срабатывает, если пользователь использует свою клавиатуру. –

Так оно и было. Благодарю. Причина, по которой я выбрал выбор, - это то, что я думал, что если кто-то переместится и ударит пробел вместо щелчка мыши, то он все равно изменит – shinjuo

onselect должен быть onclick. Это будет работать для пользователей клавиатуры.

Я бы также рекомендовал добавить теги <label> к текстам «День», «Месяц» и «Год», чтобы их было легче нажимать. Пример кода:

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

Я хотел бы также рекомендовать удаление пробелов между атрибутом onclick и значение, хотя оно может быть разобрано браузерами:

<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')"/>Day

источник

2010-09-16 19:50:28

Неправда. http://stackoverflow.com/questions/828262 – nalply

@nalply - Я не понимаю ваш нижний уровень. Корневая проблема - это не пробелы, которые я сказал * должен * быть изменен. Проблема заключается в том, что onselect должен быть включен. Также обратите внимание, что другой ответ Пекки не решает проблему. Я сделаю заказ, чтобы сделать его более ясным. –

Я удалил downvote, потому что ваше новое редактирование стало более ясным, чем раньше. – nalply

Возможно, это может быть полезно ... Это простой html - нет 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>

Кстати некоторые сайты не позволяют открывать их в IFRAME (по соображениям безопасности - ClickJacking)

источник

2013-07-11 14:57:19 inemanja

Вот как JQuery, чтобы сделать это:

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

источник

2013-12-24 14:50:34

Это должно также работают, хотя src останется в силе:

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

источник

2014-10-14 00:13:30

Это не будет работать, если страница в iframe находится в другом домене. –

-1

Вы можете решить, сделав IFRAME в JavaScript

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

источник

2017-06-05 14:44:16

Изменение iframe src с Javascript

ответ

Смежные вопросы