JavaScript を使用して iFrame ソースを正しく変更するにはどうすればよいですか?

JavaScript を使用した iFrame ソースの変更

ユーザー操作に応じて iframe の src 属性を動的に更新するタスクに直面すると、予期しないエラーが発生する可能性があります。必要な機能が、ラジオ ボタンをクリックして「calendar」というラベルが付いた iframe の src 属性を変更するという典型的な例を調べてみましょう。

問題のコードは次のとおりです。

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

しかし、このコードは意図したアクションを実行できません。問題は、一般的なプログラミング エラーにあります。「カレンダー」iframe を参照するときの括弧の不適切な使用です。

正しい構文は次のとおりです。

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

の代わりに、誤った構文は次のとおりです。

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

後者の例の 'calendar' を囲む一重引用符は文字列を作成し、その結果、存在しない要素への参照が生じます。角括弧を使用することで、ID 'calendar' を持つ iframe を正しく参照しています。

この修正が行われると、コードは期待どおりに機能し、ラジオ ボタンがクリックされたときに iframe の src 属性がスムーズに更新されるようになります。 .

以上がJavaScript を使用して iFrame ソースを正しく変更するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。