이 블로그에서는 JavaScript에서 iframe 소스를 변경하는 방법을 설명합니다.
인라인 프레임이란 무엇입니까?
“ 인라인 프레임 ”는 현재 문서 내에 다른 지정된 문서를 포함하는 데 사용됩니다. 그 결과 명시된 링크를 기반으로 웹 페이지가 전환됩니다.
JavaScript에서 Iframe 소스를 변경하는 방법은 무엇입니까?
'와 함께 다음 접근 방식을 사용하여 JavaScript에서 iframe 소스를 변경할 수 있습니다. getElementById() ' 방법:
- “ 전달된 매개변수 ' 기술.
- “ 선택된 인덱스 ' 재산.
접근법 1: 전달된 매개변수 기술을 사용하여 JavaScript에서 Iframe 소스 변경
이 기술은 버튼의 도움으로 액세스할 때 해당 페이지 링크를 기능의 매개 변수로 배치하여 지정된 페이지로 전환하는 데 활용할 수 있습니다.
예시
아래에 언급된 예를 따르자:
< 센터 >< h2 > iframe 소스 변경 안에 자바스크립트 h2 >
< 아이프레임 아이디 = '웹 페이지' 소스 = 'https://linuxhint.com/detect-tab-key-javascript/' 너비 = '1000' 키 = '550' 프레임 테두리 = '0' 스크롤링 = '아니' > 아이프레임 >
< br >< br >
< 버튼 클릭 = 'changeIframe('https://linuxhint.com/category/linux-commands/')' > Linux 명령 페이지를 표시하려면 클릭하십시오. 단추 >
< br > br >
센터 >
위의 코드 줄에서 다음 단계를 수행합니다.
- '에 명시된 링크를 지정하십시오. <인라인 프레임> ” 태그를 조정된 치수와 함께 표시합니다.
- 또한 '가 첨부된 버튼을 생성합니다. 온 클릭 ” 지정된 링크를 매개변수로 갖는 changeIframe() 함수로 리디렉션되는 이벤트.
- 이렇게 하면 버튼 클릭 시 지정된 링크로 페이지가 이동합니다.
코드의 JavaScript 부분을 계속 살펴보겠습니다.
< 스크립트 유형 = '텍스트/자바스크립트' >
기능 변경Iframe ( 변화 ) {
문서. getElementById ( '웹 페이지' ) . 소스 = 변화 ;
}
스크립트 >
위의 코드 조각에서:
- '라는 이름의 함수를 선언합니다. changeIframe() '.
- 정의에서 '에 지정된 링크에 액세스하십시오. 인라인 프레임 ” 요소를 사용하여 document.getElementById() ' 방법.
- 그 후 ' 소스 ” 매개변수를 사용하여 액세스된 링크에 대한 기능 액세스 시 지정된 링크를 할당합니다. 변화 '.
- 그러면 버튼 클릭 시 지정된 링크와 관련하여 페이지가 전환됩니다.
산출
위의 출력에서 버튼을 클릭하면 페이지가 전환되는 것을 볼 수 있습니다.
접근법 2: selectedIndex 속성을 사용하여 JavaScript에서 Iframe 소스 변경
“ 선택된 인덱스 ” 속성은 드롭다운 목록에서 선택한 옵션의 인덱스를 반환합니다. 이 속성은 드롭다운 목록에서 선택한 옵션의 값과 관련하여 지정된 링크로 리디렉션하는 데 적용할 수 있습니다.
예시
다음 예를 살펴보겠습니다.
< 아이프레임 아이디 = '웹 페이지' 소스 = 'https://linuxhint.com/detect-tab-key-javascript/' 너비 = '1000' 키 = '550' 프레임 테두리 = '0' 스크롤링 = '아니' > 아이프레임 >
< br >< br >
< 아이디 선택 = '연결' >
< 옵션 값 = 'https://linuxhint.com/auto-refresh-web-page-every-5-seconds-javascript/' > 기사로 전환 1
< 옵션 값 = 'https://linuxhint.com/convert-array-to-object-javascript/' > 기사로 전환 둘
고르다 >
< br >< br >
< 버튼 클릭 = 'changeIframe();' > Iframe 소스 변경 단추 >
< br >< br >
신체 > 센터 >
위의 코드 줄에서 다음 단계를 수행합니다.
- ' 내에 명시된 링크를 지정하는 단계를 기억하십시오. <아이프레임> ” 태그가 지정된 “ ID ” 및 조정된 크기.
- 다음 단계에서 ' 고르다 ” 요소가 지정된 “ ID ”를 클릭하여 드롭다운 목록을 만듭니다.
- 그 후 ' 옵션 ” 옵션 값을 정의하는 요소.
- 명시된 링크를 ' 값 ” 옵션 요소.
- 또한 ' 온 클릭 ” changeIframe() 함수를 호출하는 이벤트입니다.
코드의 JavaScript 부분으로 이동해 보겠습니다.
< 스크립트 유형 = '텍스트/자바스크립트' >기능 변경Iframe ( ) {
~였다 가져 오기 = 문서. getElementById ( '연결' ) ;
~였다 쓰러지 다 = 가져 오기 . 옵션 [ 가져 오기 . 선택된 인덱스 ] . 값 ;
문서. getElementById ( '웹 페이지' ) . 소스 = 쓰러지 다 ;
}
스크립트 >
위의 코드 조각에서:
- '라는 함수를 정의합니다. changeIframe() '.
- 정의에서 지정된 ' 고르다 ” 요소를 ' ID ”를 사용하여 document.getElementById() ' 방법.
- 다음 단계에서 ' 선택된 인덱스 ' 그리고 ' 값 ” 값으로 리디렉션하는 속성, 즉 선택한 해당 옵션에 대한 링크입니다.
산출
위의 출력에서 페이지가 ' 옵션 ” 버튼 클릭 시 값.
결론
“ getElementById() ” 메서드를 전달된 매개변수 기술 또는 “ 선택된 인덱스 ” 속성을 사용하여 JavaScript에서 Iframe 소스를 변경할 수 있습니다. 전자의 기술은 버튼 클릭 시 함수의 매개변수로 전달된 링크로 리디렉션하는 데 활용할 수 있습니다. 후자의 접근 방식은 드롭다운 목록에서 선택한 옵션과 관련하여 해당 링크로 전환하도록 구현될 수 있습니다. 이 튜토리얼은 JavaScript에서 iframe 소스를 변경하는 방법을 설명합니다.