>  기사  >  웹 프론트엔드  >  Iframe과 FRAME_HTML/Xhtml_Web 페이지 제작의 차이점 분석

Iframe과 FRAME_HTML/Xhtml_Web 페이지 제작의 차이점 분석

WBOY
WBOY원래의
2016-05-16 16:41:461361검색
1. Iframe 태그의 활용
Iframe이라면 '잊혀진 구석'에 던져두셨겠지만, 그 형제 Frame이라면 낯설지 않으실 겁니다. 프레임 태그는 프레임 태그입니다. 다중 프레임 구조는 브라우저 창에 여러 HTML 파일을 표시하는 것입니다. 이제 우리는 매우 현실적인 상황에 직면하게 됩니다. 튜토리얼이 있는 경우 각 페이지의 끝에는 내용을 제외하고 "이전 섹션"과 "다음 섹션"에 대한 링크가 있습니다. 게다가 페이지의 다른 부분의 내용도 똑같습니다. 페이지별로 멍청한 페이지를 만드는 것은 너무 지루한 것 같습니다. 이때 문득 다른 부분을 유지할 수 있는 방법이 없을까 하는 생각이 들었습니다. 페이지를 변경하지 않고 튜토리얼만 만드세요. 다른 내용 없이 페이지별 콘텐츠 페이지가 됩니다. 페이지 위로 및 아래로 링크를 클릭하면 튜토리얼 콘텐츠 부분만 변경되고 다른 부분은 변경되지 않습니다. 이렇게 하면 시간이 절약되고, 다른 하나는 튜토리얼에 앞으로 세 개의 긴 변경 사항과 두 개의 짧은 변경 사항이 있을 것이라는 점입니다. 또한 매우 편리하며 더 중요한 것은 광고 배너, 열 목록, 거의 모든 페이지에 포함된 탐색 및 기타 항목은 한 번만 다운로드되고 더 이상 다운로드되지 않습니다.
플로팅 프레임 태그라고도 하는 Iframe 태그를 사용하여 HTML 디스플레이에 HTML 문서를 삽입할 수 있습니다. Frame 태그와 가장 큰 특징은 이 태그가 참조하는 HTML 파일이 다른 HTML 파일과 독립적으로 표시되지 않고 HTML 파일에 직접 삽입되어 HTML 파일의 내용과 통합되어 전체가 될 수 있다는 점입니다. 또한, 콘텐츠를 반복적으로 작성할 필요 없이 동일한 콘텐츠를 한 페이지에 여러 번 표시할 수도 있습니다.
이제 Iframe 태그 사용에 대해 이야기해 보겠습니다.
Iframe 태그의 형식은 다음과 같습니다.

src: 파일 경로(HTML 파일, 텍스트, ASP 등일 수 있음)
너비, 높이 : "draw "중간 그림" 영역의 너비와 높이;
스크롤링: 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 태그의 텍스트를 ID 번호로 변경하려면 myH1 to hello, my dear, 다음을 사용할 수 있습니다.
document.myH1.innerText="hello, my dear" (문서는 생략 가능)
example.htm 파일에서 Iframe이 가리키는 하위 양식 마크 객체는 일반 객체와 동일합니다. DHTML 객체 모델은 일관되고 객체 액세스 제어 방법도 동일하므로 자세히 설명하지 않겠습니다.
2. 하위 폼의 상위 폼에 있는 개체에 액세스하고 제어합니다.
하위 폼에서는 상위(부모) 개체를 통해 상위 창의 개체에 액세스할 수 있습니다.
example.htm 등:



안녕하세요, 제 아내




ID 번호 myH2로 Frame1.htm의 제목 텍스트에 액세스하여 "hello, my friend"로 변경하려면 다음과 같이 작성할 수 있습니다.
parent.myH2.innerText= "안녕, 내 친구"
여기서 상위 개체는 현재 양식(example.htm이 있는 양식)을 나타냅니다. 하위 양식에서 상위 양식의 개체에 액세스하려면 예외 없이 상위 개체를 사용합니다.
Iframe은 다른 HTML 파일에 포함되어 있지만 상대적으로 독립적이며 "독립 왕국"입니다. 단일 HTML의 특성은 부동 프레임에도 적용됩니다.
상상해 보세요, Iframe 태그를 통해 변경되지 않은 내용을 Iframe으로 표현할 수 있습니다. 이렇게 하면 동일한 내용을 반복적으로 작성할 필요가 없습니다. 이는 프로그래밍의 과정이나 기능과 비슷하며 얼마나 지루한 매뉴얼입니까? 노동력이 절약됩니다! 또한, 결정적으로 레이아웃을 조정하기 위해 각 페이지를 수정하는 대신 하나의 상위 양식의 레이아웃만 수정하면 되므로 페이지 수정이 더 가능해집니다.
한 가지 주의할 점은 Nestscape 브라우저는 Iframe 태그를 지원하지 않는다는 점입니다. 그러나 오늘날의 IE 세계에서는 Iframe 태그가 그 자체를 위해서만 널리 사용되는 것은 아닙니다. 웹사이트) 뿐만 아니라 네티즌들이 인터넷 요금을 절약할 수 있도록 하는 것도 어떨까요?
Floating FRAME은 HTML4.0 사양의 정의이며 현재 브라우저에서는 이를 지원합니다.
FRAMESET으로 대표되는 파티션과 달리 플로팅 FRAME은 웹 페이지에 내장 객체로 존재하며 그 스타일은 페이지 위의 그래픽이나 애플릿과 같습니다. Floating FRAME은 이름, src, marginwidth, marginheight, FRAMEborder 및 스크롤링을 포함하여

one.htm 표시


two.htm 표시


가져오기 start .htm
사이의 모든 콘텐츠는 무시됩니다. 그렇지 않으면 해당 내용이 표시되는데, 이는 현재 브라우저가

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.