집 >웹 프론트엔드 >HTML 튜토리얼 >iframe 속성을 사용하는 방법

iframe 속성을 사용하는 방법

小云云원래의: 2017-11-17 09:15:543431검색

초기 HTML을 배우다 보면 iframe의 속성값을 접하게 됩니다. 사실 iframe은 매우 흥미로운 태그입니다. 이제 후배들과 함께 이야기해보겠습니다. HTML iframe 태그의 기능은 다른 문서를 포함하는 인라인 프레임(즉, 인라인 프레임)을 생성하는 것입니다. 일반 용어로 말하면 html 페이지에 다른 html 페이지를 삽입하는 것입니다. 이 라벨은 실제 작업에서 비교적 일반적이고 중요합니다. 예를 들어, iframe은 기본적으로 일반 웹 프로젝트의 백그라운드에서 사용되는데, 다양한 메일박스에 로그인할 때 왼쪽의 링크를 클릭하면 오른쪽의 웹페이지로 전환되는 효과를 흔히 볼 수 있습니다. iframe을 통해.

모든 브라우저는 iframe 태그를 지원하므로 호환성 문제가 없습니다.

iframe의 보다 일반적인 사용법은 다음과 같습니다.

<iframe name="main" width="100%" height="200" frameborder="0" scrolling="no" src="http://www.phpernote.com/"></iframe>

위 코드의 매개변수는 실제 상황에 따라 수정되어야 합니다. 다음은 iframe의 보다 일반적인 속성 중 일부입니다.

name iframe의 이름을 설정합니다.

longdesc iframe 설명과 관련하여 이 속성은 기본적으로 현재 주류 브라우저를 지원하지 않으므로 사용할 필요가 없습니다.

border iframe 가장자리의 너비를 설정합니다.

bordercolor를 설정합니다. iframe 테두리 색상, 값은 RGB 색상 또는 색상 이름일 수 있습니다.

frameboder 테두리가 3D인지 여부를 설정합니다(0=아니요, 1=예).

height iframe의 높이를 설정합니다(사용 가능한 픽셀 값 또는 백분율) )

width iframe 너비 설정(사용 가능한 픽셀 값 또는 백분율)

marginheight는 iframe의 위쪽 및 아래쪽 여백을 정의합니다.

marginwidth는 iframe의 왼쪽 및 오른쪽 여백을 정의합니다.

스크롤링 스크롤 막대가 있는지 여부(사용 가능) 값은 yes, no, auto입니다.)

src는 iframe에서 호출하는 파일을 지정합니다(참조 파일: html, htm, gif, jpeg, jpg, png, txt, *.*)

noresize는 크기 조정을 금지합니다. IE 코어 브라우저만 지원합니다

allowtransparency 투명성을 허용할지 여부입니다. IE5.5는 부동 프레임의 콘텐츠 투명성을 지원하기 시작합니다. 부동 프레임에 대한 투명한 내용을 정의하려면 다음 조건을 충족해야 합니다.

1. iframe 요소와 함께 사용되는 AllowTransparency 태그 속성은 true로 설정되어야 합니다.

2. iframe 콘텐츠 소스 문서에서 background-color 또는 body 요소의 bgColor 태그 속성을 투명으로 설정해야 합니다.

예제는 다음과 같습니다.
(1) 상위 프레임 페이지 코드

<body bgColor="#eeeeee">     
<iframe allowTransparency="true" src="phpernote.html" noresize></iframe>

(2) 하위 프레임 페이지 코드(예: phpernote.html 페이지 코드)

<body bgColor="transparent">

3. iframe의 id 속성을 지정하고 높이와 값을 가져옵니다. iframe 스크롤 막대 너비의 합

<iframe id="phpernote" src="www.phpernote.com"></iframe>    
<script type="text/javascript">    
var iframe=document.getElementById(&#39;phpernote&#39;);    
document.write(iframe.scrollHeight);//滚动条高度    
document.write(iframe.scrollWidth);//滚动条宽度    
</script>

위는 iframe 속성에 대한 자세한 설명입니다. 다음으로 편집자가 iframe 높이를 적응적으로 설정하는 방법을 알려드릴 것입니다. PHP 중국어 웹사이트.

iframe 속성을 사용하는 방법

관련 기사