Modifica iframe src con Javascript

94

Sto cercando di modificare un <iframe src=... >quando qualcuno fa clic su un pulsante di opzione. Per qualche motivo il mio codice non funziona correttamente e non riesco a capire perché. Ecco cosa ho:

<!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>
Espandi lo snippet

javascript  iframe  src 
— shinjuo
fonte
@Pekka Ecco perché è un commento.
— mbq
@mbq no, voglio dire che è davvero una cattiva idea in questo scenario. L'OP sembra incorporare codice da un servizio esterno. Non puoi recuperarlo usando AJAX in primo luogo a causa della sicurezza cross-domain, e anche se potessi, avere l'HTML e metterlo in un DIV non funzionerebbe, perché potrebbe contenere riferimenti relativi a immagini e fogli di stile e come. Gli IFrames sono davvero la cosa da fare qui penso
— Pekka
@Pekka sono d'accordo; Mi mancava quella parte del servizio remoto. Ho cancellato il mio commento per non confondere le persone.
— MBQ
PERCHÉ DOSE'NT WORK codice sopra in qualsiasi browser ????
— harix

Risposte:

125

In questo caso, probabilmente è perché stai usando le parentesi sbagliate qui:

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

dovrebbe essere

document.getElementById('calendar').src = loc;
— Pekka
fonte
11
@shinjuo onselectnon è l'attributo corretto da utilizzare qui. Potresti voler usare onclick- nota però che non si attiverà se l'utente usa la tastiera
— Pekka
Questo è quello che era. Grazie. Il motivo per cui ho scelto di selezionare è perché pensavo che se qualcuno avesse toccato e
— premuto lo
@shinjuo sì, è una buona idea. Penso però che dovresti usare qualche variazione di onchangeper questo.
— Pekka
2
"onclick" funziona per la tastiera. Non è presente alcun evento "onselect".
— Aaron D
@Aaron c'è un evento onselect non standard, ma è per la selezione del testo. Se onclickfunziona per attivare / disattivare un pulsante di opzione, è tutto risolto, fantastico!
— Pekka
61

Forse questo può essere utile ... È semplice html - no 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>
Espandi lo snippet

A proposito, alcuni siti non ti permettono di aprirli in iframe (motivi di sicurezza - clickjacking)

— inemanja
fonte
2
Potresti spiegare perché " google.com " non è consentito in inframe e qualche consiglio per renderlo disponibile (non deve essere iframe, ma simile)? Apprezzo così tanto.
— Qibiron Who
1
@ hikaru89 questa è una risposta in ritardo ... Non puoi semplicemente "renderla" disponibile. Non è consentito negli iframe di proposito, Google lo fa per molte ragioni da solo.
— Mister SirCode
18

Ecco il modo jQuery per farlo:

$('#calendar').attr('src', loc);
— Jim Clouse
fonte
8

Il onselectdeve essere onclick. Funzionerà per gli utenti della tastiera.

Suggerirei inoltre di aggiungere <label>tag al testo di "Giorno", "Mese" e "Anno" per facilitarne il clic. Codice di esempio:

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

Suggerirei anche di rimuovere gli spazi tra l'attributo onclicke il valore, sebbene possa essere analizzato dai browser:

<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

Dovrebbe essere:

<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
fonte
2
@nalply - Non capisco il tuo voto negativo. Il problema principale non sono gli spazi, che ho detto dovrebbero essere modificati. Il problema è che onselect dovrebbe essere onclick. Nota anche che l'altra risposta di Pekka non risolve il problema. Riordinerò la mia risposta per renderla più chiara.
— Aaron D
Ho rimosso il voto negativo perché la tua nuova modifica è più chiara di prima.
— nalply
6

Anche questo dovrebbe funzionare, sebbene srcrimarrà intatto:

document.getElementById("myIFrame").contentWindow.document.location.href="http://myLink.com";
— Aram Paronikyan
fonte
3
Questo non funzionerà quando la pagina nell'iframe si trova su un dominio diverso.
— Frederic Leitenberger
2

Ecco il mio codice aggiornato. Funziona bene e può aiutarti.

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

passare onselecta onchangeinput e utilizzo

calendar.src = loc

Mostra snippet di codice

— Kamil Kiełczewski
fonte
-2

Puoi risolverlo creando l'iframe in javascript

  document.write(" <iframe  id='frame' name='frame' src='" + srcstring + "' width='600'  height='315'   allowfullscreen></iframe>");
Espandi lo snippet
— daniel yanovsky
fonte
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.