아이프레임 사용 방법
- 清浅원래의
- 2019-05-06 09:57:3144832검색
iframe은 현재 HTML 페이지에 다른 문서를 삽입할 수 있는 인라인 프레임입니다. 일반적으로 iframe을 사용하여 페이지에 iframe 태그를 직접 삽입한 다음 src를 지정할 수 있습니다.
어떤 사람들은 iframe이 에너지 소비가 가장 많은 요소라고 말하기 때문에 가능한 한 적게 사용하도록 노력하세요. 어떤 사람들은 iframe의 보안이 너무 열악하므로 사용을 최대한 줄여야 한다고 말합니다. 그들이 말하는 것은 사실이지만 iframe의 힘은 무시할 수 없으며 현재 iframe을 사용하는 회사가 부족하지 않습니다.
d5ba1642137c3f32f4f4493ae923989c 태그는 인라인 프레임을 지정합니다. 인라인 프레임은 현재 HTML 문서 내에 다른 문서를 포함하는 데 사용됩니다.
모든 주요 브라우저는 d5ba1642137c3f32f4f4493ae923989c 태그를 지원합니다. d5ba1642137c3f32f4f4493ae923989c 및 065276f04003e4622c4fe6b64f465b88 안에 프롬프트 텍스트를 넣으면 d5ba1642137c3f32f4f4493ae923989c을 지원하지 않는 브라우저에 프롬프트 텍스트가 표시됩니다.
iframe을 사용하는 방법은 무엇입니까?
보통 우리는 iframe 태그에 지정된 src를 페이지에 직접 삽입하기 위해 iframe을 사용합니다.
예:
<!-- <iframe> 标签规定一个内联框架 这里写p 标签是为了看align的效果 --> <p style="overflow: hidden;">这是一些文本。 这是一些文本。 这是一些文本。这是一些文本。 这是一些文本。 这是一些文本。 <iframe name="myiframe" id="myrame" src="external_file.html" frameborder="0" align="left" width="200" height="200" scrolling="no"> <p>你的浏览器不支持iframe标签</p> </iframe> 这是一些文本。 这是一些文本。 这是一些文本。这是一些文本。 这是一些文本。 这是一些文本。</p>
iframe의 일반적인 속성:
name: d5ba1642137c3f32f4f4493ae923989c의 이름을 지정합니다.
width: d5ba1642137c3f32f4f4493ae923989c의 너비를 지정합니다.
height: d5ba1642137c3f32f4f4493ae923989c의 높이를 지정합니다.
src: d5ba1642137c3f32f4f4493ae923989c에 표시되는 문서의 URL을 지정합니다.
frameborder: d5ba1642137c3f32f4f4493ae923989c 주위에 테두리를 표시할지 여부를 지정합니다. (0은 테두리가 없음을 의미하고, 1비트는 테두리가 있음을 의미합니다.)
align: 주변 요소를 기준으로 d5ba1642137c3f32f4f4493ae923989c을 정렬하는 방법을 지정합니다. (왼쪽, 오른쪽, 위쪽, 가운데, 아래쪽).
스크롤: d5ba1642137c3f32f4f4493ae923989c에 스크롤 막대를 표시할지 여부를 지정합니다. (예, 아니오, 자동)
위 코드에서 iframe의 src 속성은 로컬 HTML 페이지입니다
코드는 다음과 같습니다.
<body>
<div id="div" style="height: 300px; background: #ddd;">这是一个外部文件里面的内容</div></body><script>
var div = document.getElementById("div");
console.log(div);</script>모든 대화형 부분도 이 페이지에 기록되며, iframe 가져온 페이지로 자동 전송됩니다.
그렇다면 iframe 내부에 콘텐츠를 가져오는 방법은 무엇일까요?
var iframe = document.getElementById("myrame"); //获取iframe标签
var iwindow = iframe.contentWindow; //获取iframe的window对象
var idoc = iwindow.document; //获取iframe的document对象
console.log(idoc.documentElement); //获取iframe的html
console.log("body",idoc.body);단, 내부의 DOM은 얻을 수 없습니다. URL(즉, 가져온 html 파일)에서 얻을 수 있습니다.
iframe의 장점과 단점
장점:
페이지를 다시 로드할 때 전체 페이지를 다시 로드할 필요가 없으며 페이지에서 하나의 프레임 페이지만 다시 로드하면 됩니다(데이터 전송 감소, 웹 페이지 로딩 시간 감소)
이 기술은 간단하고 사용하기 쉬우며 주로 다음 용도로 사용됩니다. 검색 엔진이 필요하지 않은 페이지
개발이 편리하고 코드 중복률이 낮습니다(예: 페이지 머리글, 바닥글).
단점:
페이지가 많아 관리가 쉽지 않습니다.
인쇄하기 쉽지 않습니다.
다중 프레임 페이지가 늘어납니다.
브라우저의 뒤로 버튼이 유효하지 않습니다.
많은 단점으로 인해 개념에 맞지 않습니다. 표준 웹 디자인에 속하며 현재 HTML5에서는 더 이상 이 태그를 지원하지 않습니다.
위 내용은 아이프레임 사용 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!