Wie ändere ich die iFrame-Quelle mithilfe von JavaScript korrekt?

Ändern der iFrame-Quelle mit JavaScript

Wenn man mit der Aufgabe konfrontiert wird, das src-Attribut eines iframes als Reaktion auf Benutzerinteraktionen dynamisch zu aktualisieren, kann es zu unerwarteten Fehlern kommen. Sehen wir uns ein typisches Beispiel an, bei dem die gewünschte Funktionalität darin besteht, das src-Attribut eines Iframes mit der Bezeichnung „Kalender“ zu ändern, wenn auf ein Optionsfeld geklickt wird.

Hier ist der betreffende Code:

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

Dieser Code führt jedoch nicht die beabsichtigte Aktion aus. Das Problem liegt in einem häufigen Programmierfehler: unsachgemäße Verwendung von Klammern beim Verweisen auf den „Kalender“-Iframe.

Die korrekte Syntax sollte lauten:

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

Anstelle des Fehlers:

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

Die einfachen Anführungszeichen rund um „calendar“ im letzteren Beispiel erzeugen eine Zeichenfolge, die zu einem Verweis auf ein nicht vorhandenes Element führt. Durch die Verwendung von eckigen Klammern beziehen wir uns korrekt auf den Iframe mit der ID „Kalender“.

Sobald diese Korrektur vorgenommen wurde, sollte der Code wie erwartet funktionieren und das src-Attribut des Iframes reibungslos aktualisieren, wenn auf ein Optionsfeld geklickt wird .

Das obige ist der detaillierte Inhalt vonWie ändere ich die iFrame-Quelle mithilfe von JavaScript korrekt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!