이 장에서는 HTML에서 iframe을 사용하는 방법을 소개하여 모든 사람이 html에서 iframe의 사용법을 이해할 수 있도록 합니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.
어떤 사람들은 iframe이 에너지 소모가 가장 많은 요소이므로 가능한 한 적게 사용한다고 하고, 다른 사람들은 iframe의 보안이 너무 열악하므로 가능한 한 적게 사용한다고 합니다. 그들이 말하는 것은 사실이지만 iframe의 힘은 무시할 수 없으며 현재 이를 사용하는 회사가 부족하지 않습니다.
모든 주요 브라우저는
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:
너비:
높이:
src:
프레임 테두리:
스크롤링:
위 코드에서 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 장점과 단점
장점:
페이지를 다시 로드할 때 전체 페이지를 다시 로드할 필요는 없습니다. 페이지의 프레임 페이지만 다시 로드하면 됩니다(데이터 전송을 줄이고 웹페이지 로딩 시간을 줄입니다). 기술은 간단합니다. 사용하기 쉽습니다. 검색 엔진에서 페이지를 검색할 필요가 없을 때 주로 사용됩니다. 개발에 편리하고 코드 중복률이 줄어듭니다(예: 페이지 머리글 및 바닥글). 단점:
많은 페이지가 생성되고 관리가 쉽지 않습니다. 다중 프레임 페이지로 인해 서비스 HTTP 요청이 늘어납니다.
브라우저의 뒤로 버튼이 유효하지 않습니다.
위 내용은 HTML에서 iframe을 사용하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!