Changer iframe src avec Javascript

94

J'essaye de changer un <iframe src=... >quand quelqu'un clique sur un bouton radio. Pour une raison quelconque, mon code ne fonctionne pas correctement et j'ai du mal à comprendre pourquoi. Voici ce que j'ai:

<!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>
Développer l'extrait

javascript  iframe  src 
— Shinjuo
source
@Pekka C'est pourquoi c'est un commentaire.
— mbq
@mbq non, je veux dire que c'est une très mauvaise idée dans ce scénario. L'OP semble intégrer du code à partir d'un service externe. Vous ne pouvez pas récupérer cela en utilisant AJAX en premier lieu en raison de la sécurité interdomaine, et même si vous le pouviez, avoir le HTML et le mettre dans un DIV ne fonctionnerait pas, car il pourrait contenir des références relatives à des images et des feuilles de style et tel. Les IFrames sont vraiment la chose à faire ici, je pense
— Pekka
@Pekka Je suis d'accord; J'ai manqué cette partie de service à distance. J'ai supprimé mon commentaire pour ne pas confondre les gens.
— mbq
POURQUOI DOSE'NT WORK code ci-dessus dans n'importe quel navigateur ????
— harix

Réponses:

125

Dans ce cas, c'est probablement parce que vous utilisez les mauvaises parenthèses ici:

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

devrait être

document.getElementById('calendar').src = loc;
— Pekka
source
11
@shinjuo onselectn'est pas l'attribut correct à utiliser ici. Vous voudrez peut-être utiliser onclick- notez cependant que cela ne se déclenchera pas si l'utilisateur utilise son clavier
— Pekka
Voilà ce que c'était. Merci. La raison pour laquelle j'ai choisi de sélectionner est parce que je pensais que si quelqu'un passait par l'onglet et frappait l'espace au lieu d'un clic de souris, cela changerait toujours
— shinjuo
@shinjuo ouais, c'est une bonne idée. Je pense cependant que vous devrez utiliser une variante de onchangepour cela.
— Pekka
2
"onclick" fonctionne pour le clavier. Il n'y a pas d'événement "onselect".
— Aaron D
@Aaron il y a un événement onselect non standard, mais c'est pour sélectionner du texte. Si cela onclickfonctionne pour activer / désactiver un bouton radio, tout est résolu, super!
— Pekka
61

Peut-être que cela peut être utile ... C'est du html simple - pas de 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>
Développer l'extrait

D'ailleurs certains sites ne vous permettent pas de les ouvrir dans iframe (raisons de sécurité - détournement de clics)

— inemanja
source
2
Pourriez-vous expliquer pourquoi " google.com " n'est pas autorisé dans l'inframe et des conseils pour le rendre disponible (ne doit pas être iframe, mais similaire)? J'apprécie tellement.
— Qibiron Who
1
@ hikaru89 c'est une réponse tardive ... Vous ne pouvez pas simplement la «rendre» disponible. Ce n'est pas autorisé dans les iframes à dessein, Google le fait pour de nombreuses raisons de son propre chef.
— Mister SirCode
18

Voici la façon jQuery de le faire:

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

Le onselectdoit être onclick. Cela fonctionnera pour les utilisateurs de clavier.

Je recommanderais également d'ajouter des <label>balises au texte «Jour», «Mois» et «Année» pour les rendre plus faciles à cliquer. Exemple de code:

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

Je recommanderais également de supprimer les espaces entre l'attribut onclicket la valeur, bien qu'il puisse être analysé par les navigateurs:

<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

Devrait être:

<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
source
2
@nalply - Je ne comprends pas votre vote défavorable. Le problème fondamental ne sont pas les espaces, qui, selon moi, devraient être modifiés. Le problème est que l'onselect doit être onclick. Notez également que l'autre réponse de Pekka ne résout pas le problème. Je réorganiserai ma réponse pour la rendre plus claire.
— Aaron D
J'ai supprimé le vote défavorable car votre nouvelle modification est plus claire qu'avant.
— nalply
6

Cela devrait également fonctionner, même si le srcrestera intact:

document.getElementById("myIFrame").contentWindow.document.location.href="http://myLink.com";
— Aram Paronikyan
source
3
Cela ne fonctionnera pas lorsque la page de l'iframe se trouve sur un domaine différent.
— Frederic Leitenberger
2

Voici mon code mis à jour. Cela fonctionne bien et cela peut vous aider.

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

changement onselect pour onchangedes intrants et de l' utilisation

calendar.src = loc

Afficher l'extrait de code

— Kamil Kiełczewski
source
-1

Vous pouvez le résoudre en créant l'iframe en javascript

  document.write(" <iframe  id='frame' name='frame' src='" + srcstring + "' width='600'  height='315'   allowfullscreen></iframe>");
Développer l'extrait
— Daniel Yanovsky
source
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.