창틀이란? 창 프레이밍은 브라우저 문서 창을 여러 창으로 나누는 것입니다. 각 창은 독립적인 웹 페이지 파일을 표시할 수 있으며 각 프레임(즉, 페이지)에는 고유한 URL이 있습니다. 프레임 창은 어떻게 생성하나요? 프레임은 일반적으로 태그를 사용하여 생성됩니다. 그러나 HTML 4에서는 태그를 사용하여 문서 내에 "인라인 프레임"을 만들 수도 있습니다. JavaScript의 경우 <iframe>은 <frameset>과 동일한 프레임을 생성합니다. </p> <p> HTML에서 창을 분할하려면 <frameset>를 사용하세요. 다중 창 페이지의 <body> 페이지에서 <frameset>...</frameset>을 사용하여 페이지 주요 부분의 시작 위치와 끝 위치를 표시합니다. 또한 <frameset> 태그는 창을 나누는 방법과 각 창의 위치 및 크기를 결정합니다. 기본 문법 구조는 다음과 같습니다. </p> <div class="jb51code"> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;"> <frameset cols=n rows=n frameborder=yes|no border=n bordercolor=#n framespacing=n></frameset> </pre><div class="contentsignin">로그인 후 복사</div></div> </div> <p>열과 행: 페이지를 나누는 방식을 결정하는 두 가지 매개변수입니다. cols를 사용하여 왼쪽 및 오른쪽 창을 분할하고 각 프레임의 왼쪽 및 오른쪽 너비는 창 너비에 대한 백분율로 표시됩니다. 예를 들어 cols="30%,40%,*"는 가로 방향으로 세 개의 창으로 나뉘며 각 창의 전체 너비에 대한 백분율이 30%, 40%, 30%라는 의미입니다. 그 중 "*"는 남은 부분, 즉 "*"에 해당하는 작은 창의 너비가 남은 너비를 의미한다. 행을 사용하여 상단 및 하단 창을 분할하고 백분율 설정 방법도 사용합니다. </p> <p> <strong>frameborder: </strong>는 프레임이 추가된 경우 각 하위 창(예)에 테두리를 추가해야 하는지(아니요) 지정합니다. 테두리 매개변수를 사용하여 테두리 너비를 지정하고 bordercolor를 사용하여 지정합니다. 테두리의 색상. </p> <p> <strong>framespacing: </strong>은 각 하위 창 사이의 간격 크기를 설정하는 데 사용됩니다. 기본값은 0입니다. </p> <p> <frameset> 태그를 사용하여 창을 나눈 후 각 창의 속성은 HTML <frame> 태그를 사용하여 정의되므로 <frameset> 각 하위 창. 구문은 다음과 같습니다. </p> <div class="jb51code"> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;"> <frame align=left|center|right|top|bottomv name=framename src＝url noresize scrolling＝yes|on|auto frameborder=yes|no bordercolor＝＃n marginheight=n marginwidth＝n></frame> </pre><div class="contentsignin">로그인 후 복사</div></div> </div> <p> <strong>align: </strong> 하위 창의 위치를 왼쪽(왼쪽), 오른쪽(오른쪽), 가운데(가운데), 위(위) 또는 아래(아래)로 설정합니다. </p> <p> <strong>name: </strong>은 하위 창의 이름을 지정하는 데 사용되고, src는 하위 창에 해당하는 HTML 페이지 주소를 지정하는 데 사용됩니다. </p> <p> <strong>noresize: </strong>는 사용자용입니다. <frame> 태그에 이 매개변수가 포함되어 있으면 사용자는 마우스를 사용하여 각 창의 크기를 조정하거나 수정할 수 없습니다. </p> <p> <strong>스크롤: </strong>하위 창에 스크롤 막대가 필요한지 여부를 설정합니다. scrolling=no인 경우 스크롤 막대가 필요하지 않습니다. scrolling=yes인 경우 스크롤 막대가 필요합니다. scrolling=auoto인 경우 실제 상황에 따라 스크롤 막대가 자동으로 설정됩니다. </p> <p> <strong>frameborder 및 bordercolor: </strong>는 하위 창의 테두리 및 테두리 색상을 설정하는 데 사용됩니다. 그러나 개체는 <frame>으로 표시된 하위 창으로 제한됩니다. </p> <p> <strong>marginheight 및 marginwidth: </strong>는 하위 창의 위쪽 및 아래쪽 가장자리와 왼쪽 및 오른쪽 가장자리의 너비를 각각 설정하는 데 사용됩니다. </p> <p> 예: </p> <div class="jb51code"> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;"> <frameset cols="50%,*,25%"> <frame src="http://www.baidu.com" noresize="noresize" /> <frame src="http://www.baidu.com" /> <frame src="http://www.baidu.com" /> </frameset></pre><div class="contentsignin">로그인 후 복사</div></div> </div> <p><strong>JavaScript에서 프레임 창은 어떤 관계가 있나요? <br /> </strong> 창의 모든 프레임은 <span style="color: #800000"><strong>top,frame</strong><span style="color: #000000"> 및 </span><strong>parent</strong></span> 속성을 통해 다른 프레임을 참조할 수 있습니다. </p> <p> 창이나 프레임 내의 JavaScript 코드는 자체 창이나 프레임을 창 또는 자체로 참조할 수 있습니다. </p> <p>각 창에는 프레임 속성이 있습니다. 이 속성은 Window 객체의 배열을 참조합니다. 여기서 각 요소는 이 창에 포함된 프레임을 나타냅니다(창에 프레임이 없으면 프레임[] 배열은 비어 있고 프레임 길이는 0입니다). 창 프레임[0]을 사용하여 첫 번째 프레임을 참조하고, 프레임[1]을 사용하여 두 번째 프레임을 참조하는 식으로 사용할 수 있습니다. </p> <p>각 창에는 이 창을 포함하는 Window 개체를 참조하는 상위 속성도 포함되어 있습니다. 이런 방식으로 창의 첫 번째 프레임은 형제 프레임을 참조할 수 있습니다. 예: </p> <div class="jb51code"> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;"> parent.frames[1]</pre><div class="contentsignin">로그인 후 복사</div></div> </div> <p>창이 프레임이 아닌 최상위 창인 경우 상위 속성은 창 자체를 참조합니다. </p> <div class="jb51code"> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;"> parent==self;</pre><div class="contentsignin">로그인 후 복사</div></div> </div> <p>프레임이 최상위 창에 포함된 다른 프레임 내에 포함된 경우 프레임은 parent.parent를 사용하여 최상위 창을 참조할 수 있습니다. </p> <p><span style="color: #800000"><strong>참고: <br> </strong></span>프레임은 본문 태그 및 콘텐츠와 공존할 수 없습니다. </p> <p> 프레이밍은 검색 엔진 최적화에 도움이 되지 않습니다. 일반 프런트엔드 페이지에서는 프레이밍을 사용하지 않는 것이 좋습니다. </p> <p>이상 내용이 이 글의 전체 내용입니다. 자바스크립트 프로그래밍을 배우시는 모든 분들께 도움이 되었으면 좋겠습니다. </p>
