페이지에 포함된 iframe의 스크롤을 제어하는 방법은 무엇입니까? 방법은 iframe 창의 스크롤 방법을 사용하는 것입니다.
1. iframe의 창 개체 가져오기
var iwin = document.getElementById('iframe1').contentWindow;
2. iframe의 창 문서 객체를 가져옵니다.
var doc = iwin.document;
3. iframe 창 개체의 스크롤 메서드를 호출합니다.
iwin.scroll(0,doc.body.scrollHeight);
스크롤의 두 매개변수는 x축과 y축의 스크롤 양입니다.
doc.body.scrollHeight는 iframe 페이지의 높이입니다(표시되지 않은 부분 포함).
포괄적인 적용 예는 다음과 같습니다.
다음과 같이 코드 코드를 복사합니다.
<html>
<머리>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>호버 테스트</title>
<스타일 유형="텍스트/css">
ul{
배경색:#ff00ff;
표시:블록;
}
.toc 리{
위치:상대 너비:10em;
배경색:#00ff00;
표시:블록;
}
리 아 {
/*display:block;*/ /*블록 모드로 표시되면 전체 상위 요소 공간을 차지합니다*/
배경색:#0000ff;
} /*블록 수준 요소를 만들어야 합니다*/
리 아이{
표시:없음;
}
리 a:hover{
텍스트 정렬:왼쪽;
}/*여기에 추가된 코드는 IE6용으로만 표시됩니다. 텍스트 장식, 색상, Z-색인 외에는 특별한 기능이 없습니다.*/
.toc li a:i{에 마우스를 올리세요.
표시:블록;
너비:6em;
위치:절대;
상단:0;
left:100%; /* 여기서 100%는 li 요소에 상대적인 너비를 나타냅니다.*/
여백:-1em 0 0 0em;
패딩:1em;
배경:#cde;
테두리:1px 단색 빨간색;
텍스트 정렬:왼쪽;
Z-색인:10000;
}
</style>
</head>
<본문>
<iframe id="iframe1" src=""></iframe>
HTML 코드
<ul id="toc">
<li><a href="1.html">1장<i>용이 보이는 장면</i></a></li>
<li><a href="2.html">1장<i>기사가 소환되는 장면</i></a></li>
<li><a href="3.html">1장<i>실패에 대한 실망</i></a></li>
<li><a href="4.html">1장<i>용이 보이는 장면</i></a></li>
<li><a href="5.html">1장<i>용이 보이는 장면</i></a></li>
<li><a href="6.html">1장<i>용이 보이는 장면</i></a></li>
<li><a href="7.html">1장<i>용이 보이는 장면</i></a></li>
</ul>
<스크립트 언어="자바스크립트">
함수 getElementAbsPos(e) {
var t = e.offsetTop;
var l = e.offsetLeft;
while(e = e.offsetParent) {
t += e.offsetTop;
l += e.offsetLeft;
}
return {왼쪽:l,top:t};
}
함수 getPosition(obj){
var 왼쪽 = 0;
var 상단 = 0;
while(obj != document.body){
왼쪽 = obj.offsetLeft;
상단 = obj.offsetTop;
obj = obj.offsetParent;
}
왼쪽으로 돌아가십시오.
}
var lis = document.getElementsByTagName('li');
var iwin = document.getElementById('iframe1').contentWindow;
var doc = iwin.document;
for(var i=0;i<lis.length;i++){
lis[i].onmouseover = 함수(){
var obji = this.childNodes[0].childNodes[1];
doc.writeln('<br>'+ obji.innerText + ',' + getElementAbsPos(document.getElementById('toc')).left);
doc.writeln('<br>'+ obji.offsetLeft + ',' + getElementAbsPos(obji).left + ',' + obji.offsetWidth+ ',' + obji.style.left);
doc.writeln('<br><b>'+ doc.body.scrollHeight + '</b>')
iwin.scroll(0,doc.body.scrollHeight);
//iwin.scrollTo(10000); //잘못됨
}
}
</script>
</body>
</html>