html에서 iframe 태그의 역할과 사용법에 대한 자세한 설명-HTML 튜토리얼-php.cn

html에서 iframe 태그의 역할과 사용법에 대한 자세한 설명

黄舟

풀어 주다： 2017-07-21 11:37:30

원래의

1287명이 탐색했습니다.

현재 웹사이트를 보면 인터넷 속도가 좀 느린 편이지만 거의 모든 페이지에 배너, 칼럼 사진, 저작권 등 유사한 내용이 많습니다. 물론 통일된 웹사이트 스타일과 광고가 필요하기 때문에 효과는 아무런 문제가 없지만 결국 이러한 "장식"으로 인해 사용자의 지갑이 점점 고갈되고 있습니다." 이러한 유사한 항목을 한 번 다운로드한 후 더 이상 다운로드할 필요가 없고 다운로드만 할 수 있도록 하는 방법이 있습니까? 콘텐츠 영역이 변경된 웹페이지의 콘텐츠는 어떻습니까?

　답은 확실합니다: iframe 태그를 적용하세요!

　 1. Iframe 태그의 사용법

Iframe의 경우 이미 "잊혀진 구석"에 던져졌을 수도 있지만, 그 형제 Frame의 경우에는 낯설지 않을 것입니다. . 프레임 태그는 프레임 태그입니다. 다중 프레임 구조는 하나의 브라우저 창에 여러 HTML 파일을 표시하는 것입니다. 이제 우리는 매우 현실적인 상황에 직면하게 됩니다. 튜토리얼이 있는 경우 각 페이지의 끝에 내용을 제외하고 "이전 섹션"과 "다음 섹션"에 대한 링크가 있습니다. 튜토리얼마다 다른데, 페이지의 다른 부분의 내용은 똑같습니다. 페이지별로 멍청하게 만드는 게 너무 지루한 것 같으니 문득 다른 부분을 만들 수 있는 방법이 없을까 하는 생각이 들었습니다. 페이지는 변경되지 않고 튜토리얼만 다른 컨텐츠 없이 페이지별 컨텐츠 페이지를 생성합니다. 페이지 위로 또는 아래로 링크를 클릭하면 튜토리얼 컨텐츠만 변경되고 나머지는 변경되지 않습니다. , 하나는 시간을 절약하고 다른 하나는 향후 튜토리얼에 세 개의 긴 부분과 두 개의 짧은 부분이 있는 경우 변경 사항도 매우 편리하며 더 중요한 것은 광고 배너, 열 목록, 탐색 및 전체 군대에 영향을 미치지 않는다는 것입니다. 거의 모든 페이지에 포함된 다른 것들은 한 번만 다운로드되고 더 이상 다운로드되지 않습니다.

　Iframe 태그(플로팅 프레임 태그라고도 함)를 사용하면 HTML 디스플레이에 HTML 문서를 삽입할 수 있습니다. Frame 태그와 가장 큰 특징은 이 태그가 참조하는 HTML 파일이 다른 HTML 파일과 독립적으로 표시되지 않고 HTML 파일에 직접 삽입되어 HTML 파일의 내용과 통합되어 전체가 될 수 있다는 점입니다. 또한, 콘텐츠를 반복적으로 작성할 필요 없이 동일한 콘텐츠를 한 페이지에 여러 번 표시할 수도 있습니다.

이제 Iframe 태그 사용에 대해 이야기해 보겠습니다.

　Iframe 태그의 사용 형식은 다음과 같습니다.

<Iframe src="URL" width="x" height="x" scrolling="[OPTION]" frameborder="x"></iframe>

로그인 후 복사

　 src: HTML 파일, 텍스트, ASP 등이 될 수 있는 파일 경로입니다.

너비, 높이: "그림- in-picture" 영역 너비 및 높이;

스크롤링: SRC의 지정된 HTML 파일이 지정된 영역에 표시되지 않을 때 스크롤 옵션이 NO로 설정되면 스크롤 막대가 나타나지 않습니다. 자동으로 설정되면 스크롤 막대가 표시되지 않습니다. : 스크롤 막대가 자동으로 나타납니다. 예인 경우 표시됩니다.

FrameBorder: "picture-in-picture"를 인접한 콘텐츠와 혼합하기 위해 종종 다음과 같이 설정됩니다. 0.

　예:　

<Iframe src="http://www.webjx.com" width="250" height="200" scrolling="no" frameborder="0"></iframe>

로그인 후 복사

　2. 상위 폼과 플로팅 프레임 간의 상호 제어

스크립팅 언어 및 개체 계층 구조에서는 Iframe을 포함하는 창을 상위 창 폼이라고 합니다. 부동 프레임을 하위 양식이라고 합니다. 상위 양식에서 하위 양식에 액세스하거나 그 반대로 액세스하려면 양식을 통해 양식에 액세스하고 제어할 수 있기 전에 개체 계층 구조를 알아야 하기 때문입니다. 프로그램.

　 1. 상위 양식의 하위 양식에 있는 개체에 액세스하고 제어합니다.

상위 양식에서 Iframe 또는 하위 양식은 문서 개체의 하위 개체이며 스크립트 액세스에서 직접 사용할 수 있습니다. 하위 양식의 개체.

이제 질문이 있습니다. 즉, 이 Iframe을 어떻게 제어합니까? 여기서는 Iframe 개체에 대해 이야기해야 합니다. 이 태그에 ID 속성을 설정하면 문서 객체 모델 DOM을 통해 Iframe에 포함된 HTML에 대한 일련의 제어를 수행할 수 있습니다.

　예를 들어 test.htm 파일을 example.htm에 포함하고 test.htm에서 일부 표시 개체를 제어합니다.

<Iframe src="test.htm" id="test" width="250" height="200" scrolling="no" frameborder="0"></iframe>

로그인 후 복사

test.htm 파일의 코드는 다음과 같습니다.

<html>
　　　<body>
　　　　<h1 id="myH1">hello,my boy</h1>
　　　</body>
　　</html>

로그인 후 복사

ID 번호가 myH1인 H1 태그의 텍스트를 hello, my dear로 변경하려면 다음을 사용할 수 있습니다.

　document.myH1.innerText="hello, my dear"(여기서 문서는 생략 가능) )

예제 .htm 파일에서 Iframe 태그 개체가 가리키는 하위 양식은 일반 DHTML 개체 모델과 일치하며 개체 액세스 제어 방법도 동일하므로 자세히 설명하지 않겠습니다.

　 2. 자식 폼에서 부모 폼의 개체에 접근하고 제어합니다.

　 자식 폼에서는 부모(부모) 개체를 통해 부모 창에 있는 개체에 접근할 수 있습니다.

　예: 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">hello,my wife</h1>
　　　</body>
　　</html>

로그인 후 복사

　　如果要在frame1.htm中访问ID号为myH2中的标题文字并将之改为"hello,my friend"，我们就可以这样写：parent.myH2.innerText="hello,my friend"

　　这里parent对象就代表当前窗体(example.htm所在窗体)，要在子窗体中访问父窗体中的对象，无一例外都通过parent对象来进行。

　　Iframe虽然内嵌在另一个HTML文件中，但它保持相对的独立，是一个“独立王国“哟，在单一HTML中的特性同样适用于浮动帧中。

　　试想一下，通过Iframe标记，我们可将那些不变的内容以Iframe来表示，这样，不必重复写相同的内容，这有点象程序设计中的过程或函数，减省了多少繁琐的手工劳动！另外，至关重要的是，它使页面的修改更为可行，因为，不必因为版式的调整而修改每个页面，你只需修改一个父窗体的版式即可了。

　　有一点要注意，Nestscape浏览器不支持Iframe标记，但在时下IE的天下，这似乎也无大碍，广泛采用Iframe标记，既为自己(网站)着了想，又为网友节省了网费，何乐而不为？

위 내용은 html에서 iframe 태그의 역할과 사용법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!