은비네 가족 | 프레임 팁 (A) - 한 개 이상의 Iframe에 타깃을 주는 방법

<xhtml> <head><title>▣ 인터넷 휴게소 팁 - 프레임 팁 (A) - 한 개 이상의 Iframe에 타깃을 주는 방법</title> <xscript type="text/xxJavaScript" src="expop.js"></xscript> <xscript language="xxJavaScript1.2" src="../cwh/js_css/editer3.js" TYPE="text/xxjavascript"></xscript> <style type="text/css">  </style> </head> <xBODY> <xscript language="xxJavascript" src="../cwh/js_css/webedit2.js"></xscript> <table class="bb" width=700> <tr><td bgcolor="#9FB6CD" colspan="2" align="center"> <table border="0" cellpadding="0" cellspacing="0"><tr> <td width="20" bgcolor="red"></td><td align="center" valign="middle" width="500" height="30"> <button class="irp_tip">프레임 팁 (A) - 한 개 이상의 Iframe에 타깃을 주는 방법 </button></td> <td width="20" bgcolor="cornflowerblue" align="right"> </td></tr> </table> </td> </tr> <tr> <td width=100%> <table border=0 width=700 cellpadding=0 cellspacing=2> <tr><td><br> 내부 프레임(inline frame ; iframe)이나 링크에 타깃을 주는 방법들은 대부분 인지하고 계실것입니다. 중복되는 팁이지만 <br> 재 정리해서 등록합니다. 하나의 링크를 설정해 두고 클릭시 하나의 내부 프레임에 링크시킨 웹 문서를 불러 들이거나<br> 하나 이상의 내부 프레임에 동시에 웹 문서들을 불러들이는 방법입니다. 먼저 아래의 [미리보기] 버튼을 눌러 확인해 봅니다. <br><center> </iframe> <xFORM NAME="htmlcode"> <table width="450" cellpadding=0 cellspacing=0 style="border:5px threedhighlight double; border-color:#B1B2B9;" ><tr> <td bgcolor="#DBDCE2" width="100" align="center">[소스 예문]</td> <td bgcolor="#DBDCE2" align="center"> <input hidefocus='true' TYPE="button" NAME="view" VALUE="미리보기" [안내]태그제한으로등록되지않습니다-xxonClick="xxjavascript:preview()" style="width:120px;"> <input hidefocus='true' type="button" value="소스복사" [안내]태그제한으로등록되지않습니다-xxonClick="xxjavascript:copyclipboard('htmlcode.codefield');alert(‎'클립보드에 복사가 되었습니다 !\n\n메모장이나 넣고자 하는 문서내에 마우스 오른쪽 버튼을 클릭해 `붙여넣기` 를 선택,\n또는 키보드의 ctrl 키를 누른 상태에서 V 키를 눌러 붙여 넣습니다.')" style="width:120px;"> <input hidefocus='true' type="button" value="내 PC에 저장" [안내]태그제한으로등록되지않습니다-xxonClick="SaveAsFile(document.htmlcode.codesave.value)" style="width:120px;"> <input hidefocus='true' TYPE="button" NAME="reference" VALUE="◁버튼설명" [안내]태그제한으로등록되지않습니다-xxonClick="xxjavascript:alert(‎'⊙ 미리보기 ⊙ \n\n버튼을 클릭하면 새 창으로 예문내용 실행되어 보여줍니다.\n\n⊙ 소스복사 ⊙\n\n아래 박스속의 내용이 전체선택이 되며 클립보드에 복사됩니다.\n소스코드만 복사해 `붙여넣기` 하시고자 할 때 선택 하세요.\n\n⊙ 내 PC에 저장 ⊙\n\n소스를 내 컴퓨터에 html 문서로 저장하시고자 할 때 선택.\n저장버튼을 누르면 irpcafe01.html이란 문서로 저장됩니다.\n[내 문서] 등의 찾기쉬운 폴더를 지정해 저장하시면 됩니다.')" style="width:80px;"> </td> </tr> <tr><td colspan="2" bgcolor="#DBDCE2"> <TEXTAREA NAME="codefield" ID="codesave" rows="8" cols="100" style="overflow:auto: width:100%;"> <a href="testlink5.html" target="ifrm1" [안내]태그제한으로등록되지않습니다-xxonclick="window.frames['ifrm2'].location=‎'testlink6.html'"> 링크열기</a> <br><br> </iframe> </iframe> </TEXTAREA> </xFORM> </td></tr></table></center><br> 위에서 링크열기 를 클릭했을 때 설정한 두 개의 내부프레임(iframe)에 동시에 testlink5.html 문서와 testlink6.html 문서가 각<br> 프레임에다가 열어줍니다. 하이퍼링크의 testlink5.html 문서의 타깃을 ifrm1으로 주었으므로 ifrm1 이란 이름을 가진<br> 프레임에 testlink5.html 문서를 열어주는 것이며 또한 [안내]태그제한으로등록되지않습니다-xxonclick 이라는 이벤트 핸들러를 사용해 다음 링크를 걸어줍니다.<br> 위 소스의 a 태그안에 <span class="irp1"><font color=blue><b>[안내]태그제한으로등록되지않습니다-xxonclick</b></font>="window.frames['<font color=red><b>ifrm2</b></font>'].location=‎'testlink6.html'"</span> 부분으로 클릭시 a 태그의 src 에 연결된<br> 링크페이지를 열면서 동시에 클릭 이벤트를 받아 이 이벤트에 연결된 링크를 열어주는 것입니다. [안내]태그제한으로등록되지않습니다-xxonclick 이벤트 핸들러는 마우스<br> 버튼을 클릭했을 때 어떤 행동을 이행하라는 스크립트 코드입니다. 클릭했을 때 설정한 testlink6.html 문서를 지정한 방식(타깃)<br> 에 따라 연결해 주는것이며 위에서는 <font color=red><b>ifrm2</b></font> 가 타깃입니다. 따라서 [안내]태그제한으로등록되지않습니다-xxonclick에 연결된 링크는 ifrm2라는 이름을 가진 아이프레임에<br> testlink6.html 문서를 열어 줍니다. 설정방법은 아래 형식에 따라서 만들어 줍니다.<br> <center> <fieldset style="padding:2px; border-top-width:1px; border-right-width:1px; border-bottom-width:1px; border-left-width:1px; border-style:solid; width:670; height:50; border-top-color: maroon; border-left-color: maroon;"> <legend align=center style="font-size:9pt;"><button class="fld">설 정</button> </legend> <br><a href=<b>"페이지1 지정"</b> target="<font color=red><b>이름1</b></font>" <font color=blue><b>[안내]태그제한으로등록되지않습니다-xxonclick</b></font>="window.frames['<font color=red><b>이름2</b></font>'].location=‎<b>'페이지2 지정'</b>"> 링크열기</a> <br><br> <iframe name="<font color=red><b>이름1</b></font>" width="프레임가로크기" height="프레임 세로크기" src="" frameborder="1"></iframe><br> <iframe name="<font color=red><b>이름2</b></font>" width="프레임가로크기" height="프레임 세로크기" src="" frameborder="1"></iframe> </fieldset></center> <br> 위 예문에서 필요할 경우 프레임을 더 추가해 줄 수 있으며 위 예문에서 하나를 더 추가해 3 개의 프레임을 이용하려면 <span class="irp1"><font color=blue><b>[안내]태그제한으로등록되지않습니다-xxonclick</b></font>="window.frames['<font color=red><b>ifrm2</b></font>'].location=‎'testlink6.html'"</span> 에서 [안내]태그제한으로등록되지않습니다-xxonclick 부분의<br> window.frames['<font color=red><b>ifrm2</b></font>'].location=‎'testlink6.html' 이 스크립트 뒤에다가 똑같은 구문형식으로 하나를 더 추가해 줍니다.<br> window.frames['<font color=red><b>ifrm3</b></font>'].location=‎'문서3.html'" 이런씩으로 추가해 주되 앞의 스크립트와의 별개의 스크립트 이므로 <br> 앞 부분에 세미콜론 부호 <font color=blue size=3><b>;</b></font> 으로 연결해 줍니다. 아래와 같이...<br> <font color=blue><b>[안내]태그제한으로등록되지않습니다-xxonclick</b></font>=<font size=4><b>"</b></font>window.frames['<font color=red><b>ifrm2</b></font>'].location=‎'testlink6.html' <font color=red face="arial black" size=3><b>;</b></font> window.frames['<font color=red><b>frame3</b></font>'].location=‎'문서3.html'<font size=4><b>"</b></font><br> 그리고 <iframe name="<font color=red><b>ifrm3</b></font>" width="가로크기" height="세로크기" src="" frameborder="1"></iframe> 이렇게 내부 프레임을<br> 하나 더 추가해 넣어주면 클릭시 해당 이름(ifrm1,ifrm2,ifrm3)을 가진 프레임에다가 각각 열어주는 것입니다.<br><br> </xform> </td> </tr></table> <p> </p> </td> <td></td> </tr> </table> </xBODY> </xHTML>