如何使用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中文网其他相关文章！