Iframe 사용 분석
프레임 주위의 가장자리 너비 설정
FRAMEBODER
스크롤 막대가 있는지 여부(YES,NO, AUTO )
SRC
IFRAME에서 호출되는 파일 또는 이미지를 지정합니다(HTML, HTM, GIF, JPEG, JPG, PNG, TXT, *.*)
"Picture-in-picture" 효과-IFRAME 태그 사용에 대해 논의
요즘 웹사이트를 보면 인터넷 속도가 약간 느리지만 거의 모든 페이지에 배너를 넣어야 합니다. , 칼럼 사진, 저작권 등 물론 통일된 웹사이트 스타일의 필요성과 광고 효과로 인해 비슷한 것들이 많이 나와도 문제가 없지만, 결국 이러한 '장식'으로 인해 사용자의 지갑은 점점 더 돈이 빠져나가고 있다. " 것들. 이것을 가능하게 하는 방법은 없을까요? 비슷한 것들은 한 번 다운로드하면 다시 다운로드할 필요 없이 콘텐츠 영역이 변경된 웹페이지 콘텐츠만 다운로드되는 건가요?
답은 바로 Iframe 태그를 적용하는 것입니다!
1. Iframe 태그의 활용
Iframe이라면 '잊혀진 구석'에 던져두셨겠지만, 그 형제 Frame이라면 낯설지 않으실 겁니다. 프레임 태그는 프레임 태그입니다. 다중 프레임 구조는 브라우저 창에 여러 HTML 파일을 표시하는 것입니다. 이제 우리는 매우 현실적인 상황에 직면하게 됩니다. 튜토리얼이 있는 경우 각 페이지의 끝에는 내용을 제외하고 "이전 섹션"과 "다음 섹션"에 대한 링크가 있습니다. 게다가 페이지의 다른 부분의 내용도 똑같습니다. 페이지별로 멍청한 페이지를 만드는 것은 너무 지루한 것 같습니다. 이때 문득 다른 부분을 유지할 수 있는 방법이 없을까 하는 생각이 들었습니다. 페이지를 변경하지 않고 튜토리얼만 만드세요. 다른 내용 없이 페이지별 콘텐츠 페이지가 됩니다. 페이지 위로 및 아래로 링크를 클릭하면 튜토리얼 콘텐츠 부분만 변경되고 다른 부분은 변경되지 않습니다. 이렇게 하면 시간이 절약되고, 다른 하나는 튜토리얼에 앞으로 세 개의 긴 변경 사항과 두 개의 짧은 변경 사항이 있을 것이라는 점입니다. 또한 매우 편리하며 더 중요한 것은 광고 배너, 열 목록, 거의 모든 페이지에 포함된 탐색 및 기타 항목은 한 번만 다운로드되고 더 이상 다운로드되지 않습니다. 부동 프레임 태그라고도 하는 Iframe 태그를 사용하여 HTML 디스플레이에 HTML 문서를 삽입할 수 있습니다. Frame 태그와 가장 큰 특징은 이 태그가 참조하는 HTML 파일이 다른 HTML 파일과 독립적으로 표시되지 않고 HTML 파일에 직접 삽입되어 HTML 파일의 내용과 통합되어 전체가 될 수 있다는 점입니다. 또한, 콘텐츠를 반복적으로 작성할 필요 없이 동일한 콘텐츠를 한 페이지에 여러 번 표시할 수도 있습니다.
이제 Iframe 태그 사용에 대해 이야기해 보겠습니다.
Iframe 태그의 사용 형식은
src: 파일 경로는 HTML 파일, 텍스트, ASP 등일 수 있습니다.
width, height: "picture-in-picture" 영역의 너비와 높이
스크롤: 지정된 경우 SRC의 HTML 파일이 지정된 영역에 있습니다. 스크롤 옵션이 표시되지 않거나 완료되면 NO로 설정된 경우 스크롤 막대가 자동으로 설정되어 있으면 스크롤 막대가 표시되지 않습니다.
FrameBorder: "Picture-in-picture"를 만들기 위한 영역 테두리의 너비입니다. 인접 콘텐츠와 혼합되며 일반적으로 0으로 설정됩니다.
예:
>
2. 상위 폼과 플로팅 프레임 간의 상호 제어. 스크립팅 언어 및 개체 계층 구조에서는 Iframe을 포함하는 창을 상위 폼이라고 하고, 플로팅 프레임을 하위 폼이라고 합니다. 상위 양식에서 하위 양식에 액세스하거나 그 반대로 액세스하려면 프로그래밍 방식으로 양식에 액세스하고 제어하기 전에 개체 계층 구조를 알아야 하기 때문에 관계가 중요합니다.
1. 상위 폼의 하위 폼에 있는 개체에 액세스하고 제어합니다.
상위 폼에서는 Iframe, 즉 하위 폼이 문서 개체의 하위 개체이며, 하위 폼에 직접 액세스할 수 있습니다. 의 스크립트 개체입니다.
이제 질문이 있습니다. 즉, 이 Iframe을 어떻게 제어합니까? 여기서는 Iframe 개체에 대해 이야기해야 합니다. 이 태그에 ID 속성을 설정하면 문서 객체 모델 DOM을 통해 Iframe에 포함된 HTML에 대한 일련의 제어를 수행할 수 있습니다.
예를 들어, example.htm에 test.htm 파일을 삽입하고 test.htm에서 일부 태그 개체를 제어합니다.
test.htm 파일 코드는
hello ,my boy< /h1>
H1 태그의 텍스트를 hello로 변경하려면 , 얘야, 다음과 같이 사용할 수 있습니다:
document.myH1.innerText="hello,my dear" (문서는 생략 가능)
example.htm 파일에서 Iframe 태그 개체가 가리키는 하위 양식은 다음과 같습니다. 일반적인 DHTML 개체 모델과 일치합니다. 개체 액세스 제어 방법은 동일하므로 다시 설명하지 않습니다.
2. 하위 폼의 상위 폼에 있는 개체에 액세스하고 제어합니다.
하위 폼에서는 상위(부모) 개체를 통해 상위 창의 개체에 액세스할 수 있습니다.
example.htm 등:
< ;html>
안녕하세요, 제 아내
;
ID 번호 myH2로 Frame1.htm의 제목 텍스트에 액세스하여 "hello, my friend"로 변경하려면 다음과 같이 작성하면 됩니다. :
parent.myH2.innerText="hello,my friend" 여기서 상위 개체는 현재 양식(example.htm이 있는 양식)을 나타냅니다. 자식 폼은 예외 없이 모두 부모 개체를 통해 수행됩니다.
Iframe은 다른 HTML 파일에 포함되어 있지만 상대적으로 독립적이며 "독립 왕국"입니다. 단일 HTML의 특성은 부동 프레임에도 적용됩니다.
Iframe 태그를 통해 변경되지 않은 내용을 Iframe으로 표현할 수 있습니다. 이렇게 하면 동일한 내용을 반복해서 작성할 필요가 없습니다. 이는 프로그래밍의 프로세스나 기능과 비슷합니다. 지루한 수작업이 많아요! 또한, 결정적으로 레이아웃을 조정하기 위해 각 페이지를 수정하는 대신 하나의 상위 양식의 레이아웃만 수정하면 되므로 페이지 수정이 더 가능해집니다.
한 가지 주의할 점은 Nestscape 브라우저는 Iframe 태그를 지원하지 않는다는 점입니다. 그러나 오늘날의 IE 세계에서는 Iframe 태그가 그 자체를 위해서만 널리 사용되는 것은 아닙니다. 웹사이트) 뿐만 아니라 네티즌들이 인터넷 요금을 절약할 수 있도록 하는 것도 어떨까요?
예제
< IFRAME 프레임Border=0 프레임 간격=0 높이=25 marginHeight=0 marginWidth=0 스크롤링=no name=main src="bgm/bgm.html" width=300>
2 ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: ::::::::::::: ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: ::::::::::::::::::::::::::::::::::::::::::
iframe 사용 후 , 스크롤바가 예쁘지 않은 것을 발견하여 2 장의 사진을 사용하여 교체하고 싶습니다. ↑↓
어떻게 구현해야 합니까?
답변:
웹페이지의
을 다음 코드로 바꾸세요. 코드를 복사하세요.
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
