Zmiana źródła iframe src za pomocą JavaScript

98

Próbuję zmienić, <iframe src=... >gdy ktoś kliknie przycisk opcji. Z jakiegoś powodu mój kod nie działa poprawnie i mam problem ze zrozumieniem przyczyny. 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>
Rozwiń fragment

javascript iframe src shinjuo
źródło
@Pekka Dlatego jest to komentarz.
mbq
@mbq nie, mam na myśli, że to naprawdę zły pomysł w tym scenariuszu. Wydaje się, że OP osadza kod z usługi zewnętrznej. Nie możesz tego pobrać za pomocą AJAX w pierwszej kolejności ze względu na bezpieczeństwo międzydomenowe, a nawet gdybyś mógł, posiadanie kodu HTML i umieszczenie go w DIV nie zadziała, ponieważ może zawierać względne odniesienia do obrazów i arkuszy stylów oraz taki. Myślę, że IFrames naprawdę jest tym, co powinno się tu znaleźć
Pekka
@Pekka Zgadzam się; Brakowało mi tej części do obsługi zdalnej. Usunąłem swój komentarz, aby nie mylić ludzi.
mbq
DLACZEGO DOSE'NT WORK powyżej w dowolnej przeglądarce ????
harix

Odpowiedzi:

127

W tym przypadku jest to prawdopodobnie spowodowane użyciem niewłaściwych nawiasów:

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

Powinien być

document.getElementById('calendar').src = loc;
Pekka
źródło
11
@shinjuo onselectnie jest właściwym atrybutem do użycia w tym miejscu. Możesz chcieć użyć onclick- zauważ jednak, że nie uruchomi się, jeśli użytkownik użyje klawiatury
Pekka
Tak właśnie było. Dzięki. Powodem, dla którego wybrałem opcję zaznaczania, jest to, że pomyślałem, że jeśli ktoś
przejdzie tabulatorem i naciśnie
@shinjuo yeah, to dobry pomysł. Myślę jednak, że do tego należałoby użyć jakiejś wariacji onchange.
Pekka,
2
„onclick” działa na klawiaturze. Nie ma zdarzenia „onselect”.
Aaron D
@Aaron istnieje niestandardowe zdarzenie onselect, ale służy do zaznaczania tekstu. Jeśli onclickdziała przy włączaniu / wyłączaniu przycisku radiowego, wszystko jest rozwiązane, świetnie!
Pekka
67

Może to może być pomocne ... To zwykły html - bez 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>
Rozwiń fragment

Nawiasem mówiąc, niektóre strony nie pozwalają na otwieranie ich w ramce iframe (względy bezpieczeństwa - clickjacking)

inemanja
źródło
2
Czy mógłbyś wyjaśnić, dlaczego „ google.com ” nie jest dozwolone w inframe i jakąś radę, aby ją udostępnić (nie może to być iframe, ale podobnie)? Tak bardzo doceniam.
Fuevo
2
@ hikaru89 to jest spóźniona odpowiedź ... Nie możesz jej po prostu „udostępnić”. Nie jest to celowo dozwolone w ramkach iframe. Google robi to z wielu powodów z własnej woli.
Mister SirCode
18

Oto sposób, w jaki można to zrobić w jQuery:

$('#calendar').attr('src', loc);
Jim Clouse
źródło
9

onselectMusi być onclick. To zadziała dla użytkowników klawiatury.

Zalecałbym również dodanie <label>tagów 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>

Zalecałbym również usunięcie spacji między atrybutem onclicka wartością, chociaż przeglądarki mogą to przeanalizować:

<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

Powinien 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
Aaron D.
źródło
2
@nalply - nie rozumiem twojego głosu przeciw. Problemem głównym nie są spacje, które, jak powiedziałem, powinny zostać zmienione. Problem w tym, że onselect powinien być onclick. Zauważ też, że druga odpowiedź Pekki nie rozwiązuje problemu. Ponownie zamówię odpowiedź, aby była jaśniejsza.
Aaron D
Usunąłem głos przeciw, ponieważ Twoja nowa zmiana jest wyraźniejsza niż wcześniej.
nalply
6

To również powinno działać, chociaż srcpozostanie nienaruszony:

document.getElementById("myIFrame").contentWindow.document.location.href="http://myLink.com";
Aram Paronikyan
źródło
3
To nie zadziała, jeśli strona w elemencie iframe znajduje się w innej domenie.
Frederic Leitenberger
2

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>
KBH
źródło
0

zmiana onselectna onchangedane wejściowe i użycie

calendar.src = loc

Pokaż fragment kodu

Kamil Kiełczewski
źródło
-2

Możesz go rozwiązać, tworząc element iframe w javascript

  document.write(" <iframe  id='frame' name='frame' src='" + srcstring + "' width='600'  height='315'   allowfullscreen></iframe>");
Rozwiń fragment
daniel yanovsky
źródło