Зміна iframe src за допомогою Javascript

94

Я намагаюся змінити, <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 
— шинджуо
джерело
@Pekka Ось чому це коментар.
— mbq
@mbq ні, я маю на увазі, що це дуже погана ідея в цьому сценарії. Здається, OP вбудовує код із зовнішньої служби. Ви не можете отримати це за допомогою AJAX, в першу чергу, через міждоменну безпеку, і навіть якби ви могли, наявність HTML-коду та розміщення його в DIV не працювало б, оскільки він міг би містити відносні посилання на зображення та таблиці стилів та такі. IFrames справді саме те, що потрібно сюди їхати, я думаю
— Pekka,
@Pekka Я згоден; Я пропустив цю віддалену частину обслуговування. Я видалив свій коментар, щоб не заплутувати людей.
— mbq
ЧОМУ НЕ РОБИТИ код вище в будь-якому браузері ????
— harix

Відповіді:

125

У цьому випадку це, мабуть, тому, що ви використовуєте тут неправильні дужки:

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

має бути

document.getElementById('calendar').src = loc;
— Пекка
джерело
11
@shinjuo onselect- не правильний атрибут для використання тут. Можливо, ви захочете скористатися onclick- хоча зауважте, що це не спрацює, якщо користувач використовує свою клавіатуру
— Pekka
Ось що це було. Дякую. Причиною, яку я вибрав для select, є те, що я думав, що якщо хтось перейде на вкладку та натисне пробіл замість клацання миші, це все одно зміниться
— shinjuo
@shinjuo так, це гарна ідея. Думаю, що для цього вам доведеться використовувати деякі варіанти onchange.
— Pekka,
2
"onclick" працює для клавіатури. Події "onselect" немає.
— Аарон Д,
@Aaron існує нестандартна подія onselect, але вона призначена для виділення тексту. Якщо onclickпрацює ввімкнення / вимкнення перемикача, тоді все вирішено, чудово!
— Pekka,
61

Можливо, це може бути корисним ... Це звичайний 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)

— inemanja
джерело
2
Чи можете ви пояснити, чому " google.com " заборонено використовувати в інфрачервоному режимі та будь-яку пораду, щоб зробити його доступним (має бути не iframe, а подібним)? Ціну так багато.
— Кібірон, який
1
@ hikaru89 це пізня відповідь ... Ви не можете просто "зробити" її доступною. Це не дозволяється у фреймах навмисно, Google робить це з багатьох причин самостійно.
— Mister SirCode,
8

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. Також зауважте, що інша відповідь Пекки не вирішує проблему. Я впорядкую свою відповідь, щоб вона стала зрозумілішою.
— Аарон Д,
Я видалив голос проти, оскільки ваше нове редагування стало чіткішим, ніж раніше.
— звичайно
6

Це також має спрацювати, хоча srcволя залишиться цілою:

document.getElementById("myIFrame").contentWindow.document.location.href="http://myLink.com";
— Арам Паронікян
джерело
3
Це не спрацює, коли сторінка в iframe знаходиться в іншому домені.
— Frederic Leitenberger
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

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

— Каміль Келчевський
джерело
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.