Comment modifier correctement la source iFrame à l'aide de JavaScript ?

Modification de la source iFrame à l'aide de JavaScript

Lorsque nous sommes confrontés à la tâche de mettre à jour dynamiquement l'attribut src d'une iframe en réponse à l'interaction de l'utilisateur, on peut rencontrer des erreurs inattendues. Examinons un exemple typique où la fonctionnalité souhaitée est de modifier l'attribut src d'une iframe intitulée "calendrier" en cliquant sur un bouton radio.

Voici le code en question :

<code class="html">function go(loc) {
  document.getElementById('calendar').src = loc;
}</code>

<code class="html"><iframe id="calendar" src="about:blank" width="1000" height="450" frameborder="0" scrolling="no"></iframe></code>

<code class="html"><input name="calendarSelection" type="radio" onselect="go('http://calendar.zoho.com/embed/9a6054c98fd2ad4047021cff76fee38773c34a35234fa42d426b9510864356a68cabcad57cbbb1a0?title=Kevin_Calendar&amp;type=1&amp;l=en&amp;tz=America/Los_Angeles&amp;sh=[0,0]&amp;v=1')" />Day</code>

Cependant, ce code ne parvient pas à effectuer l'action prévue. Le problème réside dans une erreur de programmation courante : utilisation inappropriée des crochets lors du référencement de l'iframe « calendrier ».

La syntaxe correcte doit être :

document.getElementById('calendar').src = loc;

Au lieu de l'erreur :

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

Les guillemets simples entourant « calendrier » dans ce dernier exemple créent une chaîne, qui aboutit à une référence à un élément inexistant. En utilisant des crochets, nous faisons correctement référence à l'iframe avec l'identifiant « calendrier ».

Une fois cette correction effectuée, le code devrait fonctionner comme prévu, mettant à jour en douceur l'attribut src de l'iframe lorsqu'un bouton radio est cliqué. .

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!