ZZzzz~
<Iframe src="/URL" width="x" height="x" scrolling="[OPTION]"frameborder="x"></iframe>
을 감을 수 있습니다.
src: HTML 파일, 텍스트, ASP 등이 될 수 있는 파일의 경로입니다.
width, height: "picture-in-picture" 영역의 너비와 높이.
스크롤: SRC의 지정된 HTML 파일이 지정된 영역에 표시되지 않을 때 스크롤 옵션이 NO로 설정되면 스크롤 막대가 자동으로 설정되어 있으면 스크롤 막대가 자동으로 표시됩니다. 표시됩니다.
Frameborder: 영역 테두리의 너비입니다. "picture-in-picture"를 인접한 콘텐츠와 혼합하기 위해 종종 0으로 설정됩니다.
예:
<Iframe src=" http://www.xyz.com/xyz "; width="250" height="200" scrolling="no"frameborder="0"></iframe>
창과 부동 사이 프레임 스크립팅 언어 및 개체 계층 구조에서는 Iframe을 포함하는 창을 상위 폼이라고 하고, 플로팅 프레임을 하위 폼이라고 합니다. 하위 양식에 액세스하거나 그 반대로 액세스하는 경우 프로그램을 통해 양식에 액세스하고 제어하려면 먼저 개체 계층 구조를 알아야 합니다.
1. 상위 폼의 하위 폼에 있는 개체에 접근하고 제어합니다. 하위 폼인 Iframe은 문서 개체의 하위 개체로 스크립트에서 하위 폼에 있는 개체에 직접 접근할 수 있습니다. .
이제 질문이 있습니다. 즉, 이 Iframe을 어떻게 제어합니까? 여기서는 Iframe 개체에 대해 이야기해야 합니다. 이 태그에 ID 속성을 설정하면 문서 객체 모델 DOM을 통해 Iframe에 포함된 HTML에 대한 일련의 제어를 수행할 수 있습니다.
예를 들어, example.htm에 test.htm 파일을 포함시키고 test.htm의 일부 태그 개체를 제어합니다.
<Iframe src="test.htm" id="test" width="250" height="200" scrolling="no"frameborder="0"></iframe>
test.htm 파일 코드는 다음과 같습니다.
<html>
<본문>
<h1 id="myH1">안녕하세요, 내 아들</h1>
</body>
</html>
ID 번호가 myH1인 H1 태그의 텍스트를 hello, my dear로 변경하려면 다음을 사용할 수 있습니다.
document.myH1.innerText="안녕하세요, 자기야"(문서는 생략 가능)
example.htm 파일에서 Iframe 마크 개체가 가리키는 하위 양식은 일반 DHTML 개체 모델과 일치하며 개체 액세스 제어 방법도 동일하므로 자세히 설명하지 않겠습니다.
2. 하위 폼에서 상위 폼의 개체에 액세스하고 제어하려면 상위(부모) 개체를 통해 상위 창의 개체에 액세스할 수 있습니다.
example.htm과 같은 경우:
<html>
<body onclick="alert(tt.myH1.innerHTML)"> <Iframe name="tt" src="frame1.htm" width="250" height="200" scrolling="no"frameborder="0"> </iframe>
<h1 id="myH2">안녕하세요, 제 아내</h1>
</body>
</html>
ID 번호 myH2를 사용하여 Frame1.htm의 제목 텍스트에 액세스하고 이를 "hello, my friend"로 변경하려면 다음과 같이 작성할 수 있습니다.
parent.myH2.innerText="안녕하세요, 친구"
여기서 상위 개체는 현재 양식(example.htm이 있는 양식)을 나타내며 하위 양식에서 상위 양식의 개체에 액세스하려면 예외 없이 상위 개체를 통해 수행됩니다.
Iframe은 다른 HTML 파일에 포함되어 있지만 상대적으로 독립적이며 "독립 왕국"입니다. 단일 HTML의 특성은 부동 프레임에도 적용됩니다.
Iframe 태그를 통해 변경되지 않은 콘텐츠를 Iframe으로 표현할 수 있습니다. 이렇게 하면 동일한 콘텐츠를 반복해서 작성할 필요가 없습니다. 이는 프로그래밍의 프로세스나 기능과 비슷하며 얼마나 지루한가요? 육체 노동이 절약됩니다! 또한, 결정적으로 레이아웃을 조정하기 위해 각 페이지를 수정하는 대신 하나의 상위 양식의 레이아웃만 수정하면 되므로 페이지 수정이 더 가능해집니다.
Nestscape 6.0 이전 버전은 Iframe 태그를 지원하지 않습니다.
예:
<iframe src="Page" width="Width" height="Height" align="배열은 왼쪽 또는 오른쪽, 가운데일 수 있습니다." scrolling="스크롤 막대가 있는 경우 no 또는 yes를 입력하세요.">< /iframe>
< IFRAME 프레임Border=0 프레임 간격=0 높이=25 marginHeight=0 marginWidth=0 스크롤=아니요
name=main src="/bgm/bgm.html" width=300></IFRAME>
iframe을 사용해보니 스크롤바가 예쁘지 않아서 대신 사진 2장을 사용하고 싶어요↑↓
이를 어떻게 달성해야 합니까?
답변:
웹페이지의 <title>..</title>을 다음 코드로 바꾸세요.
<SCRIPT LANGUAGE="자바스크립트">
함수스크롤(n)
{온도=n;
Out1.scrollTop=Out1.scrollTop+온도;
if (temp==0) 반환;
setTimeout("scroll(temp)",80);
}
</SCRIPT>
<테이블 너비="330">
<TR>
<TD WIDTH="304" VALIGN="TOP" ROWSPAN="2" >
<DIV ID=Out1 STYLE="너비:100%; 높이:100;오버플로: 숨김 ;border-style:dashed;border-width:
1픽셀,1픽셀,1픽셀,1픽셀;">
텍스트<BR> 텍스트<BR>
텍스트<BR>
텍스트<BR>
단어
<BR>
<BR>
</DIV>
</TD>
< TD WIDTH="14" VALIGN="TOP"><IMG SRC="photo/up0605.gif" WIDTH="14" HEIGHT ="20" onmouseover="scroll(-1)" onmouseout="scroll(0) " onmousedown="스크롤 (-3)" BORDER="0" ALT="마우스를 누르면 속도가 빨라집니다!"
</TR>
<TR>
< TD WIDTH="14" VALIGN="BOTTOM"><IMG SRC="photo/down0605.gif" onmouseover ="scroll(1)" onmouseout="scroll(0)" onmousedown="scroll(3)" BORDER= "0" WIDTH ="15" HEIGHT="21" ALT="더 빠르게 하려면 마우스를 누르세요!"></TD>
</TR>
</TABLE>
다음 코드는 IFrame 적응형 높이를 구현할 수 있습니다. 즉, 페이지 길이에 자동으로 적응하여 페이지와 IFrame에 스크롤 막대가 동시에 나타나지 않도록 합니다.
소스코드는 다음과 같습니다
<script type="text/javascript">
//** iframe은 페이지에 자동으로 적응합니다**//
//페이지 높이에 따라 자동으로 높이를 조정하려는 iframe 이름 목록을 입력합니다.
//각 iframe의 ID를 쉼표로 구분합니다. 예: ["myframe1", "myframe2"] 양식은 하나만 있을 수 있으므로 쉼표가 필요하지 않습니다.
//iframe의 ID를 정의합니다.
var iframeids=["test"]
//사용자의 브라우저가 iframe을 지원하지 않는 경우 iframe을 숨길지 여부, yes는 숨김을 의미하고, no는 숨김을 의미하지 않음을 의미합니다.
var iframehide="yes"
함수 dyniframesize()
{
var dyniframe=새 배열()
(i=0; i<iframeids.length; i++)
{
if(document.getElementById)
{
//iframe 높이 자동 조정
dyniframe[dyniframe.length] = document.getElementById(iframeids);
if(dyniframe && !window.opera)
{
dyniframe.style.display="차단"
if (dyniframe.contentDocument && dyniframe.contentDocument.body.offsetHeight) //사용자의 브라우저가 NetScape인 경우
dyniframe.height = dyniframe.contentDocument.body.offsetHeight;
else if (dyniframe.Document && dyniframe.Document.body.scrollHeight) //사용자의 브라우저가 IE인 경우
dyniframe.height = dyniframe.Document.body.scrollHeight;
}
}
//설정된 매개변수에 따라 iframe을 지원하지 않는 브라우저의 표시 문제를 처리합니다.
if ((document.all || document.getElementById) && iframehide=="no")
{
var tempobj=document.all? document.all[iframeids] : document.getElementById(iframeids)
tempobj.style.display="차단"
}
}
}
if(window.addEventListener)
window.addEventListener("load", dyniframesize, false)
그렇지 않은 경우(window.attachEvent)
window.attachEvent("onload", dyniframesize)
또 다른
window.onload=dyniframesize
</script>
참조 값이 있는 기타 URL:
http://www.webshu.com/tutorial/tor/7,id=0408.htm //웹 페이지에 포함된 iframe 사용
http://www.phpx.com/man/dhtmlcn/objects/IFRAME.html //IFRAME 개체
http://www.hoyo.idv.tw/web-program/html/iframe.htm //인라인 프레임 iframe