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 중국어 웹사이트의 기타 관련 기사를 참조하세요!