"Picture-in-picture" 효과--IFRAME 태그 사용에 대해 설명

저자：Eve Cole 업데이트 시간：2009-06-11 17:24:01

현재 웹사이트를 보면 인터넷 속도는 좀 느리지만 거의 모든 페이지에 배너, 칼럼 사진, 저작권 등 유사한 내용이 많이 있습니다. 물론 통일된 웹사이트 스타일과 광고 효과가 필요하기 때문에 , 아무런 문제가 없습니다. 그러나 결국 이러한 "장식된" 것들로 인해 사용자의 지갑은 점점 더 돈이 빠져나가고 있습니다." 이러한 유사한 것들을 한 번 다운로드한 후에는 더 이상 다운로드할 필요가 없고 다운로드만 할 수 있도록 하는 방법이 있습니까? 콘텐츠가 변경된 지역의 웹 콘텐츠는 무엇입니까?
답은 바로 Iframe 태그를 적용하는 것입니다!

1. Iframe 태그의 사용 <BR> Iframe의 경우 "잊혀진 구석"에 던져졌을 수도 있지만, 형제 Frame의 경우에는 낯설지 않을 것입니다. 프레임 태그는 프레임 태그입니다. 다중 프레임 구조는 브라우저 창에 여러 HTML 파일을 표시하는 것입니다. 이제 우리는 매우 현실적인 상황에 직면하게 됩니다. 튜토리얼이 있는 경우 각 페이지의 끝에는 내용을 제외하고 "이전 섹션"과 "다음 섹션"에 대한 링크가 있습니다. 게다가 페이지의 다른 부분의 내용도 똑같습니다. 페이지별로 멍청한 페이지를 만드는 것은 너무 지루한 것 같습니다. 이때 문득 다른 부분을 유지할 수 있는 방법이 없을까 하는 생각이 들었습니다. 페이지를 변경하지 않고 튜토리얼만 만드세요. 다른 내용 없이 페이지별 콘텐츠 페이지가 됩니다. 페이지 위로 및 아래로 링크를 클릭하면 튜토리얼 콘텐츠 부분만 변경되고 다른 부분은 변경되지 않습니다. 이렇게 하면 시간이 절약되고, 다른 하나는 튜토리얼에 앞으로 3개의 긴 변경사항과 2개의 짧은 변경사항이 있을 것이며, 또한 매우 편리하며 더 중요한 것은 광고 배너, 열 목록, 거의 모든 페이지에 포함된 탐색 및 기타 항목은 한 번만 다운로드되고 더 이상 다운로드되지 않습니다.
부동 프레임 태그라고도 하는 Iframe 태그를 사용하여 HTML 디스플레이에 HTML 문서를 삽입할 수 있습니다. Frame 태그와 가장 큰 특징은 이 태그가 참조하는 HTML 파일이 다른 HTML 파일과 독립적으로 표시되지 않고 HTML 파일에 직접 삽입되어 HTML 파일의 내용과 통합되어 전체가 될 수 있다는 점입니다. 또한, 콘텐츠를 반복적으로 작성할 필요 없이 동일한 콘텐츠를 한 페이지에 여러 번 표시할 수도 있습니다.
이제 Iframe 태그 사용에 대해 이야기해 보겠습니다.
Iframe 태그의 사용 형식은 다음과 같습니다.
<Iframe src="URL" width="x" height="x" scrolling="[OPTION]" 프레임border="x"></iframe>
src: HTML 파일, 텍스트, ASP 등이 될 수 있는 파일의 경로입니다.
width, height: "picture-in-picture" 영역의 너비와 높이.
스크롤: SRC의 지정된 HTML 파일이 지정된 영역에 표시되지 않을 때 스크롤 옵션이 NO로 설정되면 스크롤 막대가 자동으로 설정되어 있으면 스크롤 막대가 자동으로 표시됩니다. 표시됩니다.
FrameBorder: "picture-in-picture"를 인접한 콘텐츠와 혼합하기 위해 영역 테두리의 너비가 0으로 설정되는 경우가 많습니다.
예를 들어:
<Iframe src="http://netschool.cpcw.com/homepage" width="250" height="200" scrolling="no"frameborder="0"></iframe>

2. 상위 폼과 플로팅 프레임 간의 상호 제어 <BR> 스크립팅 언어와 객체 계층에서 Iframe을 포함하는 창을 상위 폼이라고 하고, 플로팅 프레임을 하위 폼이라고 합니다. 이 두 관계를 분명히 하세요. 상위 양식에서 하위 양식에 액세스하거나 그 반대로 액세스하려면 프로그래밍 방식으로 양식에 액세스하고 제어하기 전에 개체 계층 구조를 알아야 하기 때문에 중요합니다.
1. 상위 폼의 하위 폼에 있는 객체에 접근 및 제어 <BR> 상위 폼에서는 Iframe, 즉 하위 폼이 문서 객체의 하위 객체로, 하위 폼에 있는 객체에 직접 접근할 수 있습니다. 스크립트.
이제 질문이 있습니다. 즉, 이 Iframe을 어떻게 제어합니까? 여기서는 Iframe 개체에 대해 이야기해야 합니다. 이 태그에 ID 속성을 설정하면 문서 객체 모델 DOM을 통해 Iframe에 포함된 HTML에 대한 일련의 제어를 수행할 수 있습니다.
예를 들어, example.htm에 test.htm 파일을 포함시키고 test.htm의 일부 태그 개체를 제어합니다.
<Iframe src="test.htm" id="test" width="250" height="200" scrolling="no"frameborder="0"></iframe>
test.htm 파일 코드는 다음과 같습니다.
<html>
<본문>
<h1 id="myH1">안녕하세요, 내 아들</h1>
</body>
</html>
ID 번호가 myH1인 H1 태그의 텍스트를 hello, my dear로 변경하려면 다음을 사용할 수 있습니다.
document.myH1.innerText="안녕하세요, 자기야"(문서는 생략 가능)
example.htm 파일에서 Iframe 마크 개체가 가리키는 하위 양식은 일반 DHTML 개체 모델과 일치하며 개체 액세스 제어 방법도 동일하므로 자세히 설명하지 않겠습니다.
2. 하위 폼의 상위 폼에 있는 개체에 액세스하고 제어합니다. <BR> 하위 폼에서는 상위(부모) 개체를 통해 상위 창의 개체에 액세스할 수 있습니다.
example.htm과 같은 경우:
<html>
<body onclick="alert(tt.myH1.innerHTML)">
<Iframe name="tt" src="frame1.htm" width="250" height="200" scrolling="no"frameborder="0"></iframe>
<h1 id="myH2">안녕하세요, 제 아내</h1>
</body>
</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 태그가 그 자체(웹사이트)를 위해서만 널리 사용되는 것은 아니지만, 이는 큰 문제가 아닌 것 같습니다. 또한 네티즌이 인터넷 요금을 절약할 수 있는 방법도 있습니다.