한 iframe에서 다른 iframe으로 하이퍼링크를 로드하는 방법은 무엇입니까?

WBOY
풀어 주다: 2023-09-07 11:41:14
앞으로
740명이 탐색했습니다.

한 iframe에서 다른 iframe으로 하이퍼링크를 로드하는 방법은 무엇입니까?

때로는 한 컨테이너의 링크를 클릭한 다음 다른 컨테이너에 콘텐츠를 표시하는 작업이 있습니다. HTML에서 iframe은 페이지의 지정된 영역에 콘텐츠를 쉽게 표시하는 데 사용됩니다. 이 문서에서는 두 가지 다른 예를 사용하여 링크를 사용하여 다른 iframe 링크를 통해 iframe을 로드합니다. 예제 1에서는 위쪽 iframe의 링크를 사용하여 아래쪽 iframe에 서로 다른 두 이미지를 표시합니다. 예제 2에서는 상위 iframe의 링크를 사용하여 비디오 콘텐츠가 하위 iframe과 상위 iframe 모두에 표시됩니다.

예 1: 상단 Iframe에 있는 두 개의 텍스트 링크를 사용하여 하단 Iframe에 이미지 콘텐츠를 표시하고 변경합니다

폴더 및 페이지 디자인 단계 -

1단계 - iFrameFile1.html과 iFrameFile2.html 두 개의 파일을 만듭니다.

2단계 - iFrameFile1.html에 HTML 코드를 작성하고 이 파일에 iframeUpper 및 iframeBottom이라는 두 개의 iFrame을 만듭니다.

3단계 - iframeBottom을 비워 두고 iframeUpper 내부에서 iFrameFile2.html 파일을 로드합니다.

4단계 - iFrameFile2.html에 HTML 코드를 작성하고 이 파일에 두 개의 태그를 만듭니다.

5단계 - 이미지 파일의 파일 이름에 대한 href 및 상대 또는 절대 경로를 사용하고 태그에 target="iframeBottom"을 사용합니다.

6단계 - 브라우저에서 iFrameFile1.html을 엽니다. 링크는 위의 iframe에 표시됩니다. 링크를 하나씩 클릭하면 하단 iframe의 이미지 파일 내용이 변경되는 것을 확인할 수 있습니다.

이 예제에서는 다음 파일이 사용되었습니다

File1 − iFrameFile1.html

파일 2 - iFrameFile2.html

파일 3 −birdalone.jpg

파일 4 −bird.jpg

Code For iFrameFile1.html

의 중국어 번역은 다음과 같습니다.

Code For iFrameFile1.html

으아악

iFrameFile2.html 코드

으아악

결과 보기 - 예 1

결과를 보려면 브라우저에서 iFrameFile1.html을 엽니다. 이제 링크를 클릭하고 결과를 확인해보세요.

예 2: 상위 Iframe의 텍스트 링크를 사용하여 하위 Iframe 및 상위 Iframe에 비디오 콘텐츠 표시

폴더 및 페이지 디자인 단계 -

1단계 - iFrameFile11.html과 iFrameFile22.html 두 개의 파일을 만듭니다.

2단계 - iFrameFile11.html에 HTML 코드를 작성하고 이 파일에 iframeUpper 및 iframeBottom이라는 두 개의 iFrame을 만듭니다.

3단계 - iframeBottom을 비워 두고 iframeUpper 내에서 iFrameFile22.html 파일을 로드합니다.

4단계 - iFrameFile22.html에 html 코드를 작성하고 이 파일에 두 개의 태그 를 만듭니다.

5단계 - 태그에서 동영상 파일의 상대 또는 절대 경로 및 파일 이름과 함께 href를 사용하고 하나의 태그에서는 target="iframeBottom"을 사용하고 다른 태그에서는 target=_self를 사용합니다.

6단계 - 브라우저에서 iFrameFile11.html을 엽니다. 링크는 위의 iFrame에 표시됩니다. 링크를 클릭하면 비디오 파일의 내용을 볼 수 있습니다. 먼저 콘텐츠가 하단 iFrame에 표시되고 그 다음에는 동일한 상단 iFrame에 표시됩니다.

이 예제에서는 다음 파일이 사용되었습니다

파일 1 − iFrameFile11.html

파일 2 - iFrameFile22.html

파일 3 - Birdvideo.mp4

iFrameFile11.html 코드:

으아악

Code For iFrameFile22.html

의 중국어 번역은 다음과 같습니다.

Code For iFrameFile22.html

으아악

결과 보기 - 예 2:

결과를 보려면 브라우저에서 iFrameFile11.html을 엽니다. 이제 링크를 클릭하고 결과를 확인해보세요.

이 HTML Iframe 및 a-href 기사에서는 두 가지 다른 예를 사용하여 첫 번째 Iframe의 링크를 클릭하여 두 번째 Iframe에 콘텐츠를 표시하는 방법을 제공합니다. 두 번째 예에서는 동일한 Iframe 내에서 콘텐츠를 보는 방법도 보여줍니다. 첫 번째 예에서는 이미지 파일을 사용하고, 두 번째 예에서는 비디오 표시 예를 사용합니다.

위 내용은 한 iframe에서 다른 iframe으로 하이퍼링크를 로드하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:tutorialspoint.com
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿