>웹 프론트엔드 >JS 튜토리얼 >js를 사용하여 프레임 숨기기 또는 표시를 제어하는 ​​방법solution_javascript 기술

js를 사용하여 프레임 숨기기 또는 표시를 제어하는 ​​방법solution_javascript 기술

WBOY
WBOY원래의
2016-05-16 17:39:471436검색

index.htm

코드 복사 코드는 다음과 같습니다.


< head>



프레임 프레임 표시 및 숨기기 작업 - 51windows.net








<br><본문> <p><p>이 페이지는 프레임을 사용하지만 귀하의 브라우저는 프레임을 지원하지 않습니다. </p> <p></body><br>


main.htm

코드 복사 코드는 다음과 같습니다.





main - 51windows.net






<입력 유형 ="button" name="shbottom " id="shbottom" onclick="shbottom();" value="아래 부분 숨기기">


프레임 중첩:

코드 복사 코드는 다음과 같습니다.

head>


">

######################################## ##

코드 복사 코드는 다음과 같습니다.

;

제목 없는 문서<br></ head> <br> <framesetrows="77,181" cols="*"framespacing="0" border="0"> <p><frame src="abc.aspx"> <br><frame src ="cde.aspx"> <br></frameset> <br></body></noframes> > <br><br><br> </p>//**********************설명************************ **:<p>프레임셋은 웹페이지가 여러 개의 블록으로 나누어져 있으며, 각 블록은 서로 다른 웹페이지 파일입니다. iframe은 페이지의 어느 위치에나 삽입할 수 있는 삽입된 웹페이지입니다. 일반적으로 iframe을 사용하는 것이 더 유연합니다. </p> </div>프레임을 사용할 때는 페이지에 body 태그가 없어야 합니다. 프레임세트 태그는 <frameset>로 시작하고 </frameset>으로 끝나며 프레임이 포함된 쌍으로 나타납니다. <p>프레임셋은 프레임셋에 내장될 수도 있습니다. 중첩된 프레임, 프레임은 여러 수준에서 중첩될 수 있습니다. <br>나중에 Javascript를 사용하여 이 객체에 쉽게 액세스할 수 있도록 프레임세트의 ID는 다음과 같습니다. <br><br><br><br><br>코드 복사<br> </p> <div class="codetitle"> <span> 코드는 다음과 같습니다.<a style="CURSOR: pointer" data="27876" class="copybut" id="copybut27876" onclick="doCopy('code27876')"><u></u><framesetrows="58,*"frameborder="NO" border="0"framepacing="0"></a>< ;frame src="top.htm " name="topFrame" 스크롤="NO" noresize ><!--Header--></span><framesetrow="*,20" cols="*" framespacing="0"frameborder= "NO" border="0"></div><framesetrow="*" cols="120,15,*"framespacing="0"frameborder="NO" border=" 0" id="leftFrameSet" ><div class="codebody" id="code27876"><frame src="menu.htm" name="leftFrame" scrolling="NO" noresize><!--Menu--><br><frame src="mid.htm" name="midFrame" scrolling="NO" noresize><!--메뉴 축소 막대--><br><framesetrows="35,*"framespacing="0"frameborder ="NO" border=" 0"><br><frame src="navi.htm" name="righttop" scrolling="NO" noresize><!--Navigation--><br>< ;frameset cols="*, 200"framespacing="0"frameborder="NO" border="0"><br><frame src="" name="mainFrame"><br><frame src ="" name="rightFrame " scrolling="NO"><br></frameset><br></frameset><br></frameset><br><frame src="bottom. htm" name="bottomFrame" scrolling="NO" noresize><!--페이지 끝--><br></frameset> <br></frameset><br><br><br> <br>일반적으로 사용되는 프레임워크 구조:<br> <br>HTML 언어 분석-프레임세트 <FRAMESET> </div><NOFRAMES> <IFRAME> <p>프레임 개념은 </p> 동시에 여러 URL을 얻기 위해 여러 프레임 창으로 나뉩니다. <FRAMESET> <FRAME>이면 충분하며, 모든 프레임 태그는 결합된 HTML 파일에 배치되어야 합니다. 이 파일은 프레임이 분할되는 방식만 기록하고 데이터를 표시하지 않으므로 < ;BODY> 이 프레임을 탐색할 때 다른 프레임의 파일 대신 이 파일을 읽어야 함을 표시합니다. <FRAMESET>은 프레임 창을 나누는 데 사용됩니다. 각 프레임 창은 <FRAME> 태그로 표시됩니다. 예: <p> <br><br><br><br></p>코드 복사<p></p> <div class="codetitle"><span> 코드는 다음과 같습니다.<a style="CURSOR: pointer" data="10123" class="copybut" id="copybut10123" onclick="doCopy('code10123')"><u></u><frameset cols="50%, *"> ; </a> </span><frame name="hello" src="/up2u.html"> </a></span></div><frame name="hi" src="me2.html"> 🎜><div class="codebody" id="code10123"> <p>이 예에서는 <FRAMESET> 화면을 왼쪽과 오른쪽으로 균등하게 분할하여 왼쪽에 Up2u.html이 표시되고, <로 표시된 프레임 창이 표시됩니다. ;FRAME> 태그는 항상 위에서 아래로, 왼쪽에서 오른쪽으로 순서가 지정됩니다. </p> <p>이 섹션은 내용이 추가되고 더 자세한 내용을 제외하고는 Composer 강의실의 [응용 프로그램 프레임워크]와 거의 동일합니다. 웹 페이지 생성 도구를 배웠다면 언급하지 않습니다. HTML을 사용하는 경우에도 Composer 및 FrontPage와 같은 도구를 선택할 것입니다. </p> <p>■ <프레임세트> <프레임> </p><FRAMESET>은 프레임 태그라고 하며 HTML 문서를 프레임 모드로 선언하고 창이 분할되는 방식을 설정하는 데 사용됩니다. <p><FRAME>은 특정 프레임 창에서 매개변수 속성을 설정합니다. <br><FRAMESET> 매개변수 설정: <br>예: <framesetrows="90,*"frameborder="0" border=0framepacing="2" bordercolor="#008000"> <br>COLS="90,*" </p>화면을 세로로 자르고(예: 왼쪽과 오른쪽 두 개의 화면으로) 정수 값과 백분율을 허용하며, *는 남은 공간을 차지한다는 의미입니다. 값의 개수는 분할된 창의 개수를 나타내며 쉼표로 구분됩니다. 예를 들어 COLS="30,*,50%"는 세 개의 창으로 나눌 수 있습니다. 첫 번째 창은 너비가 30픽셀이고 두 번째 창은 첫 번째 창과 세 번째 창을 할당한 후 남아 있는 창입니다. 아래 공간인 세 번째 창은 전체 화면의 50%를 차지하고 너비는 상대적으로 분할됩니다. 숫자를 직접 조정할 수 있습니다. <p>ROWS="120,*" <br>화면 상단과 하단을 분리한 가로 자르기입니다. 값 설정은 위와 같습니다. Netacape가 이러한 유형의 프레임을 표시할 수 없는 경우가 있으므로 COLS 및 ROWS 두 매개변수만 동일한 <FRAMESET> 태그에 있어서는 안 됩니다. 따라서 여러 분할을 사용하십시오. <br>frameborder="0" <br>프레임의 테두리를 설정합니다. 값은 0과 1뿐입니다. 0은 테두리가 없음을 의미하고 1은 테두리를 표시한다는 의미입니다. (예 또는 아니오 방지) <br>border="0" <br>프레임의 테두리 두께를 픽셀 단위로 설정합니다. <br>bordercolor="#008000" <br>프레임 테두리 색상을 설정합니다. <br>framespacing="5" <br>공간을 보존하기 위해 프레임 사이의 간격을 나타냅니다. <br><FRAME> 매개변수 설정: <br>예: <frame name="top" src="a.html" marginwidth="5" marginheight="5" scrolling="Auto" frameborder="0 " noresize 프레임 간격="6" bordercolor="#0000FF"> <br>SRC="a.html"<br>이 프레임 창에 표시할 웹 페이지 파일의 이름을 설정합니다. 각 프레임 창은 웹 페이지 파일과 일치해야 합니다. 절대 경로 또는 상대 경로를 사용할 수 있습니다. 둘 다에 대한 자세한 내용은 [링크 고급]을 참조하세요. </p>NAME="top"<p>링크할 프레임을 지정할 수 있도록 이 프레임 창의 이름을 설정합니다. 이름은 임의로 지정해야 합니다. <br>frameborder=0<br>프레임의 테두리를 설정합니다. 값은 0과 1뿐입니다. 0은 테두리가 없음을 의미하고 1은 테두리를 표시함을 의미합니다. (예 또는 아니오 사용 방지) <br>framespacing="6"<br>공백을 보존하기 위해 프레임 사이의 간격을 나타냅니다. <br>bordercolor="#008000"<br>프레임의 테두리 색상을 설정합니다. 색상 값은 [HTML 분석]을 참고하세요. <br>scrolling="Auto"<br>스크롤 표시 여부를 설정합니다. YES는 스크롤을 표시하는 것이고, NO는 스크롤을 표시하지 않는 것이며, AUTO는 상황에 따라 표시하는 것입니다. <br>noresize<br> 설정은 사용자가 이 프레임의 크기를 변경하는 것을 허용하지 않으며 이 매개변수는 사용자가 프레임을 당겨 크기를 변경할 수 없습니다. <br>marginhight=5<br>는 프레임 높이 가장자리에 예약된 공간을 나타냅니다. <br>marginwidth=5<br>는 프레임 너비 가장자리에 예약된 공간을 나타냅니다. <br>다음은 몇 가지 예시입니다. (컴포저교실의 [응용 프레임워크]와 동일) <br>HTML 코드 예시 <br><br><br><br></p> <div class="codetitle">코드 복사<span><a style="CURSOR: pointer" data="36826" class="copybut" id="copybut36826" onclick="doCopy('code36826')"> <u> 코드는 다음과 같습니다. </u></a></span><framesetrows="80,*"> </div><frame name="top" src="/a.html"> ; <div class="codebody" id="code36826">< ;frame name="bottom" src="/b.html"> <br></frameset> <br><br><br>예제 HTML 코드 <br> </div> <br><br><div class="codetitle">코드 복사<span><a style="CURSOR: pointer" data="56716" class="copybut" id="copybut56716" onclick="doCopy('code56716')"><u> 코드는 다음과 같습니다.</u></a></span><framesetrows="80,*,80"> <프레임 이름="top" src="/a.html"> </div><프레임 이름="middle" src="/b.html"> <div class="codebody" id="code56716"><프레임 이름="하단" src="/c.html" > <br></frameset> <br><br><br>HTML 코드 예 <br><br> </div> <br><br>코드 복사 <div class="codetitle"> <span><a style="CURSOR: pointer" data="23604" class="copybut" id="copybut23604" onclick="doCopy('code23604')"> 코드는 다음과 같습니다.<u></u></a><frameset cols="150,*"> ><frame name="upper_left" src= "/a.html"> </span><frame name="lower_left" src="/b.html"> </div></frameset> ><frame name="right" src= "/c.html"> <div class="codebody" id="code23604"></frameset><br>HTML 코드 예시 <br><div class="codetitle"> <span><a style="CURSOR: pointer" data="22940" class="copybut" id="copybut22940" onclick="doCopy('code22940')"><u>코드 복사</u></a></span> 코드는 다음과 같습니다.</div> <div class="codebody" id="code22940"> <br><frameset Rows=" 80,*"> <br><frame name="top" src="/a.html"> <br><frameset cols="150,*"> 프레임 이름= "lower_left" src="/b.html"> <br><프레임 이름="lower_right" src="/c.html"> <br></frameset> /frameset> <br><br><br>HTML 코드 예시 </div> <br><br><div class="codetitle"><span>코드 복사<a style="CURSOR: pointer" data="98373" class="copybut" id="copybut98373" onclick="doCopy('code98373')"><u></u> 코드는 다음과 같습니다.</a> </span></div> <frameset cols="150,*"> <div class="codebody" id="code98373"><frame name="left" src="/a.html"> <br><framesetrows="80, *"> <br><프레임 이름="upper_right" src="/b.html"> <br><프레임 이름="lower_right" src="/c.html"> <br>< ;/프레임세트> <br></프레임세트> <br><br><br> </div>■ <NOFRAMES> : ▲상단 <p>다른 사람이 사용하는 브라우저가 너무 오래되어 프레임 기능을 지원하지 않는 경우에는 아무것도 보이지 않게 됩니다. 이를 방지하려면 <NOFRAMES> 태그를 사용하면 됩니다. 사용자의 브라우저가 프레임을 볼 수 없으면 한 부분 대신 <NOFRAMES> 이러한 콘텐츠는 사용자에게 새 브라우저로 전환하라고 상기시키는 문구일 수도 있고, 프레임이 없는 웹페이지나 프레임이 없는 버전으로 자동 전환할 수 있는 페이지일 수도 있습니다. </p>적용 방법: <p><frameset> 태그 범위에 </NOFRAMES> 태그를 추가합니다. <br><br><br></p> <div class="codetitle"><span>코드 복사<a style="CURSOR: pointer" data="72074" class="copybut" id="copybut72074" onclick="doCopy('code72074')"><u></u> 코드는 다음과 같습니다. </a></span></div><framesetrows="80,*"> <div class="codebody" id="code72074"><noframes> 🎜>사용하고 계신 브라우저가 프레임을 지원하지 않는다는 의견을 보내주셔서 죄송합니다. <br></body> <br></noframes> <br><프레임 이름="top" src="/a.html"> <br><프레임 이름="bottom" src= "/b.html"> <br></frameset> <br><br><br> <br>브라우저가 프레임을 지원하는 경우 <noframes>에 있는 항목은 무시됩니다. 그러나 브라우저가 프레임을 지원하지 않는 경우 모든 프레임 태그를 인식하지 못하기 때문에 알 수 없는 태그는 건너뛰고 둘러싸인 항목은 무시됩니다. 태그는 무시되므로 <noframes> 범위 내에 있는 텍스트가 표시됩니다. <br> </div>■ <IFRAME> : ▲상단 <p>이 태그는 IE에서만 작동합니다. 그 기능은 웹 페이지 중간에 프레임 창을 삽입하여 다른 파일을 표시하는 것입니다. 주변 태그이지만 <noframes>와 같이 브라우저가 iframe 태그를 지원하지 않는 경우에만 주변 단어가 표시되며 일부 알림 단어 등을 넣을 수 있습니다. 일반적으로 브라우저를 인식하는 Java Script가 포함된 iframe을 사용하는 것이 더 좋습니다. Javascript가 해당 브라우저가 Internet Explorer가 아니라는 것을 인식하면 다른 버전으로 전환됩니다. </p><iframe>의 매개변수 설정은 다음과 같습니다. <p>예:</p> <p><br><br><br>코드를 복사하세요</p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="24413" class="copybut" id="copybut24413" onclick="doCopy('code24413')"> 다음과 같습니다:<u> </u></a><iframe src="iframe.html" name="test" align="center" width="300" height="100" marginwidth="1" marginheight=" 1" 프레임 테두리="1 " 스크롤="예"> </span> </div>src="iframe.html" <div class="codebody" id="code24413"> <br>파일 이름 외에도 이 프레임에 표시하려는 파일 소스에는 상대 경로 또는 절대 경로가 포함되어야 합니다. <p>name="test" <br>링크 태그의 대상 매개변수에 필요한 이 프레임의 이름, </p> </div>align="MIDDLE" <br>선택 값은 left, right, top, middle, Bottom, 별로 유용하지 않음 <br>width="300" height="100" <br>프레임 창의 너비와 길이(픽셀 단위). <br>marginwidth="1" marginheight="1" <br>삽입된 파일과 프레임을 위해 예약된 공간입니다. <br>frameborder="1" <br>테두리를 표시하려면 1을 사용하고 표시하지 않으려면 0을 사용합니다. (예 또는 아니오일 수 있음) <br>scrolling="Yes" <br>스크롤을 허용하려면 예를 사용하고(기본값) 스크롤을 허용하지 않으려면 아니오를 사용합니다. <br>예시: 소스코드<br><br><br><br><br>코드 복사<div class="codetitle"> <span><a style="CURSOR: pointer" data="67397" class="copybut" id="copybut67397" onclick="doCopy('code67397')"> 코드는 다음과 같습니다.<u></u></a>< center> < ;iframe src="http://www.jb51.net/" name="test" align="center" width="300" height="100" marginwidth="5" marginheight="5" 프레임보더 ="1 "> </span>죄송합니다. 사용 중인 브라우저가 IFrame을 지원하지 않아 내 웹페이지를 정상적으로 탐색할 수 없습니다. </div> <div class="codebody" id="code67397"> <br><br>결과 표시 <p>대부분의 포럼에서는 왼쪽 및 오른쪽 프레임 코드를 사용합니다. index.htm에서 프레임의 src 값을 얻는 방법~~JavaScript를 사용하여 이 사이트에 액세스할 때 모든 페이지에 프레임 로드를 구현합니다. 웹에서 프레임을 동적으로 가져오는 것을 제어합니다. 페이지. 프레임 페이지 HTML의 필드에서 자바스크립트가 다이어그램 메서드를 작동하는 방법 --- 프레임 열의 자바스크립트 코드 </p> </div> </div> </div></iframe></iframe> </div></div><div class="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng"><span>성명:</span><div>본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.</div></div></div><div class="nphpSytBox"><span>이전 기사:<a class="dBlack" title="Young의 매트릭스 search_javascript 기술을 위한 JS 코드" href="https://m.php.cn/ko/faq/17735.html">Young의 매트릭스 search_javascript 기술을 위한 JS 코드</a></span><span>다음 기사:<a class="dBlack" title="Young의 매트릭스 search_javascript 기술을 위한 JS 코드" href="https://m.php.cn/ko/faq/17737.html">Young의 매트릭스 search_javascript 기술을 위한 JS 코드</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>관련 기사</h2><em><a href="https://m.php.cn/ko/article.html" class="bBlack"><i>더보기</i><b></b></a></em><div class="clear"></div></div><ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout-key="-6t+ed+2i-1n-4w" data-ad-client="ca-pub-5902227090019525" data-ad-slot="8966999616"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><ul class="nphpXgwzList"><li><b></b><a href="https://m.php.cn/ko/faq/1609.html" title="Bootstrap 목록 그룹 구성 요소에 대한 심층 분석" class="aBlack">Bootstrap 목록 그룹 구성 요소에 대한 심층 분석</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ko/faq/1640.html" title="JavaScript 함수 커링에 대한 자세한 설명" class="aBlack">JavaScript 함수 커링에 대한 자세한 설명</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ko/faq/1949.html" title="JS 비밀번호 생성 및 강도 감지의 전체 예(데모 소스 코드 다운로드 포함)" class="aBlack">JS 비밀번호 생성 및 강도 감지의 전체 예(데모 소스 코드 다운로드 포함)</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ko/faq/2248.html" title="Angularjs는 WeChat UI(weui)를 통합합니다." class="aBlack">Angularjs는 WeChat UI(weui)를 통합합니다.</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ko/faq/2351.html" title="JavaScript를 사용하여 중국어 번체와 중국어 간체 간을 빠르게 전환하는 방법과 중국어 간체와 중국어 번체 간 전환을 지원하는 웹사이트의 요령_javascript 기술" class="aBlack">JavaScript를 사용하여 중국어 번체와 중국어 간체 간을 빠르게 전환하는 방법과 중국어 간체와 중국어 번체 간 전환을 지원하는 웹사이트의 요령_javascript 기술</a><div class="clear"></div></li></ul></div></div><ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-5902227090019525" data-ad-slot="5027754603"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><footer><div class="footer"><div class="footertop"><img src="/static/imghwm/logo.png" alt=""><p>공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!</p></div><div class="footermid"><a href="https://m.php.cn/ko/about/us.html">회사 소개</a><a href="https://m.php.cn/ko/about/disclaimer.html">부인 성명</a><a href="https://m.php.cn/ko/update/article_0_1.html">Sitemap</a></div><div class="footerbottom"><p> © php.cn All rights reserved </p></div></div></footer><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><script>jQuery.fn.wait = function (func, times, interval) { var _times = times || -1, //100次 _interval = interval || 20, //20毫秒每次 _self = this, _selector = this.selector, //选择器 _iIntervalID; //定时器id if( this.length ){ //如果已经获取到了,就直接执行函数 func && func.call(this); } else { _iIntervalID = setInterval(function() { if(!_times) { //是0就退出 clearInterval(_iIntervalID); } _times <= 0 || _times--; //如果是正数就 -- _self = $(_selector); //再次选择 if( _self.length ) { //判断是否取到 func && func.call(_self); clearInterval(_iIntervalID); } }, _interval); } return this; } $("table.syntaxhighlighter").wait(function() { $('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>"); }); $(document).on("click", ".cnblogs_code_footer",function(){ $(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide(); }); $('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}}); </script></body><!-- Matomo --><script> var _paq = window._paq = window._paq || []; /* tracker methods like "setCustomDimension" should be called before "trackPageView" */ _paq.push(['trackPageView']); _paq.push(['enableLinkTracking']); (function() { var u="https://tongji.php.cn/"; _paq.push(['setTrackerUrl', u+'matomo.php']); _paq.push(['setSiteId', '9']); var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0]; g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s); })(); </script><!-- End Matomo Code --></html>