iframe 요소의 기능은 문서 내에 문서를 삽입하고 부동 프레임을 만드는 것입니다. 많은 사람들은 iframe이 어떻게 제어되는지 잘 이해하지 못하고 기본적으로 여전히 모호한 이해 상태에 있습니다.
iframe에 대한 두 가지 참고 사항, ifr은 기존 iframe의 ID 및 NAME 값입니다.
다음은 인용된 부분입니다.
document.getElementById(“ifr”);
window.frames[“ifr”];
왜냐하면
완전한 DOM 모델을 사용하기 때문입니다(이것이 맞는지는 모르겠습니다).
iframe의 src 또는 테두리, 스크롤 및 기타 속성(속성과 동일한 개념이 아니며 속성을 scrollHeight, innerHTML 등과 같은 태그에 작성할 수 없음)을 변경하려면 첫 번째 방법을 사용해야 합니다.
iframe의 페이지(iframe 자체가 아님)를 가져오려면 두 번째 방법을 사용해야 합니다. 예를 들어 document.body의 콘텐츠를 가져오려는 경우입니다. iframe의 경우 두 번째 방법만 사용할 수 있습니다.
또한 iframe 페이지가 완전히 로드되지 않은 경우 iframe의 DOM 모델을 호출할 때 심각한 오류가 발생하므로
다음 예를
참조하세요., 하나는 aa.htm이고 다른 하나는 bb.htm입니다.
aa .htm
코드: 다음은 인용문입니다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns=" http://www.w3.org/1999/xhtml " >
<머리>
<title>제목 없는 페이지</title>
<스타일 유형="텍스트/css">
<!--
몸{
여백:0px;
}
-->
</style>
</head>
<본문>
<iframe id="ifr" name="ifr" width="100%" height="500" src="bb.htm"></iframe>
</body>
</html>
<스크립트 언어="자바스크립트" 유형="텍스트/자바스크립트">
var aa_value="나는 상단 창의 변종입니다!";
var ifr_id=document.getElementById("ifr");
var ifr_window=window.frames["ifr"];
Alert("상단 창의 경고: ifr_id로 iframe의 변형을 가져올 수 없습니다. 다음을 반환합니다." + ifr_id.bb_var);
Alert("상단 창의 경고: ifr_id로 iframe의 DOM 모델을 가져올 수 없습니다. 다음을 반환합니다." + ifr_id.window);
Alert("상단 창의 경고: ID에서 src 가져오기:" + ifr_id.src);
Alert("상단 창의 경고: 창에서 href 가져오기:" + ifr_window.document.location.href);
//bb.htm이 아직 로드되지 않았기 때문에 다운로드 시 오류가 발생할 수 있습니다.
//iframe에서 ifr_window.bb() 함수를 호출합니다.
//iframe 내에서 변수 호출
Alert("상단 창의 경고: " + ifr_window.bb_var);
//
Alert("상단 창의 경고:" + ifr_window.document.body.innerHTML);
함수 aa(메시지){
Alert("상단 창에서 경고 중이며 메시지를 받았습니다:n" + msg);
}
</script>
bb.htm
코드: 다음은 인용된 스니펫입니다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns=" http://www.w3.org/1999/xhtml " >
<머리>
<title>하위 프레임</title>
<스타일 유형="텍스트/css">
<!--
HTML,본문{
여백:0px;
너비:90%;
}
-->
</style>
</head>
<본문>
나는 서브 프레임이다!
<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...
</body>
</html>
<스크립트 언어="자바스크립트" 유형="텍스트/자바스크립트">
var bb_var="나는 ifr의 변수입니다";
함수bb(){
Alert("iframe의 경고: 나는 프레임 ifr의 함수입니다.")
}
//상위 페이지의 변수를 가져옵니다.
Alert("iframe parent.ifr_id::" + parent.ifr_id의 경고);
Alert("iframe parent.aa_value의 경고 : " + parent.aa_value);
//상위 페이지의 ifr_id를 통해 iframe의 높이를 변경합니다.
Alert("iframe의 경고: ifr의 clientHeight:" +document.body.clientHeight);
parent.ifr_id.height=document.body.clientHeight;
Alert("iframe의 경고: ifr의 scrollHeight: " + document.body.scrollHeight);
//상위 폼의 함수를 호출합니다.
parent.aa("상단 창의 함수를 호출하겠습니다. ");
//상위 양식의 제목을 변경합니다.
Alert("iframe의 경고: 상단 창의 제목을 변경하겠습니다.");
top.document.title="제목 값이 변경되었습니다";
//상위 폼의 ifr_id를 통해 테두리와 스크롤이 변경되었습니다.
Alert("iframe의 경고 : 테두리와 스크롤을 변경하겠습니다 :");
top.ifr_id.border=0;
top.ifr_id.scrolling="아니요";
</script>