如何使用JavaScript正確修改iFrame來源？

使用 JavaScript 修改 iFrame 來源

當面臨動態更新 iframe 的 src 屬性以回應使用者互動的任務時，可能會遇到意外錯誤。讓我們研究一個典型的範例，其中所需的功能是在單擊單選按鈕時更改標記為「日曆」的 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中文網其他相關文章！