Изменение src iframe с помощью Javascript

98

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

<!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>
Развернуть фрагмент

javascript iframe src Shinjuo
источник
@Pekka Вот почему это комментарий.
mbq
@mbq нет, в данном случае это действительно плохая идея. Кажется, что OP встраивает код из внешней службы. Вы не можете получить это с помощью AJAX в первую очередь из-за междоменной безопасности, и даже если бы вы могли, наличие HTML и его размещение в DIV не сработало бы, потому что он мог бы содержать относительные ссылки на изображения и таблицы стилей и такой. Я думаю, что здесь действительно стоит использовать IFrames
Пекка
@Pekka Я согласен; Я пропустил ту часть удаленного обслуживания. Я удалил свой комментарий, чтобы не запутать людей.
mbq
ПОЧЕМУ ДОЗА НЕ РАБОТАЕТ приведенный выше код в любом браузере ????
Харикс

Ответы:

127

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

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

должно быть

document.getElementById('calendar').src = loc;
Пекка
источник
11
Атрибут @shinjuo onselectздесь не подходит . Вы можете захотеть использовать onclick- обратите внимание, что это не сработает, если пользователь будет использовать свою клавиатуру
Пекка
Вот что это было. Спасибо. Причина, по которой я выбрал выбор, заключается в том, что я думал, что если кто-то нажмет пробел и нажмет пробел вместо щелчка мышью, это все равно изменится
shinjuo
@shinjuo да, это хорошая идея. Я думаю, что для этого вам придется использовать какой-то вариант onchange.
Пекка
2
«onclick» работает для клавиатуры. Событие onselect отсутствует.
Aaron D
@Aaron есть нестандартное событие onselect, но оно для выделения текста. Если onclickработает для включения / выключения радиокнопки, то все решено, отлично!
Пекка
67

Может быть, это может быть полезно ... Это простой 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 (из соображений безопасности - кликджекинг)

инеманья
источник
2
Не могли бы объяснить, почему " google.com " не разрешен в инфраструктуре, и какие-либо советы, как сделать его доступным (не должно быть iframe, но аналогично)? Я так ценю.
Fuevo
2
@ hikaru89 это запоздалый ответ ... Вы не можете просто "сделать" его доступным. Это не разрешено в iframe специально, Google делает это по многим причинам самостоятельно.
Мистер SirCode
18

Вот способ сделать это с помощью jQuery:

$('#calendar').attr('src', loc);
Джим Клаус
источник
9

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
Аарон Д.
источник
2
@nalply - я не понимаю твой голос против. Основная проблема не в пробелах, которые, как я сказал, следует изменить. Проблема в том, что onselect должен быть onclick. Также обратите внимание, что другой ответ Пекки не решает проблему. Я переупорядочу свой ответ, чтобы было понятнее.
Aaron D
Я убрал голос против, потому что ваше новое правка более четкое, чем раньше.
nalply
6

Это также должно сработать, хотя srcони останутся нетронутыми:

document.getElementById("myIFrame").contentWindow.document.location.href="http://myLink.com";
Арам Пароникян
источник
3
Это не сработает, если страница в iframe находится в другом домене.
Фредерик Лейтенбергер,
2

Вот мой обновленный код. Он отлично работает и может вам помочь.

<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
источник
0

изменить onselectна onchangeвходы и использовать

calendar.src = loc

Показать фрагмент кода

Камил Келчевски
источник
-2

Вы можете решить эту проблему, сделав iframe в javascript

  document.write(" <iframe  id='frame' name='frame' src='" + srcstring + "' width='600'  height='315'   allowfullscreen></iframe>");
Развернуть фрагмент
даниэль яновский
источник