窗口框架简介
窗口框架可以将窗口画面分割成都个小窗口，且每个小窗口中，可以显示不同的网页，达到在浏览器中同事浏览不同网页的效果。

当将浏览器分割成多个窗口之后，各个窗口可以扮演不同的功能。举例来说，分割之后的窗口，可以将其中之一作为菜单区域，另外一个窗口则可以作为显示功能页面的工作区域。基于B/S结构的软件在客户端经常会采用类似的设计。

窗口框架的建立
框架的基本结构，主要利用和标签来定义。其中，用来定义一个窗口框架组件，而标签则用于定义窗口框架中的子窗口组件。因此，一组窗口框架的标准格式与语法如下所示：

使用标签的时候是不能同时使用标签的。对于不支持标签的浏览器，可以使用标签来包含一些提示文本，而这些提示文本则需要放在<body>标签内。</p> <p>下面的示例将这个窗口垂直分割成三个子窗口，每个<frame>代表一个分割后的子窗口。</p> <html> <frameset cols = "25%, 25%,\*"> <frame src ="1.htm" /> <frame src ="2.htm" /> <frame src ="3.htm" /> </frameset> </html> <p><strong><fameset>的属性设置</strong><br> <strong>cols和rows属性</strong><br> 窗口分割时，用来定义子窗口的大小。cols为垂直分割，rows为水平分割。单位可以为像素、百分比、*。*代表自行分配。</p> <p><strong>frameborder属性</strong><br> 该属性用来设置框架边框。在默认情况下，框架集中的所有框架及框架集窗口本身都被赋予了一个3D边框。可以通过设置frameborder为0或者no来清除边框，将值设置为1或者yes则可以将边框显示出来。</p> <p><strong>border属性</strong><br> 该属性用来设置边框的宽度，在IE浏览器中无效，在NetScape浏览器中才会生效。在IE浏览器中是通过framespacing属性设置边框宽度的。</p> <p><strong>framespacing属性</strong><br> 用来设置边框宽度。</p> <p><strong>bordercolor属性</strong><br> 用来设置边框颜色。</p> <p><strong>class、id、style、title属性</strong><br> 同其他大多数标准标签一样，<frameset>包含这四个标准属性。</p> <p><strong>onLoad、onUnload事件</strong><br> Javascript的事件处理器。</p> <p><strong><frame>标签</strong></p> <frame>标签只出现在<frameset>标签内。通过使用与它关联的src属性，可以用它来设定文本内容的URL，这些内容最开始就显示在各个框架中。浏览器将框架从左到右一列一列，从上到下一行一行地防止在一个框架集中，因此<frame>标签在<frameset>标签中的顺序和数目很重要。 <p><strong><frame>的属性设置</strong><br> <strong>src属性</strong><br> 用来设置要在框架中显示的文档的URL。</p> <p><strong>name和id属性</strong><br> name属性用来对框架进行标记，以便以后被用于超文本链接（<a>）和<form>标签的target属性所引用。使用这用方法，就可以用一个框架中的链接改变另外一个框架中的内容。<br> id属性也对框架进行了唯一标识，但浏览器不支持其用于目标重定向。</p> <p><strong>noresize属性</strong><br> 禁止用户手动改变框架中行或列的大小。使用方式为noresize=“noresize”。</p> <p><strong>scrolling属性</strong><br> 对于那些内容超出所分配的窗口空间的框架而言，浏览器会显示出垂直和水平的滚动条。通过使用scrolling属性，可以显示的控制滚动条的出现与消失。<br> scrolling可以设置为yes、no、auto。</p> <p><strong>marginheight和marginwidth属性</strong><br> 浏览器通常会在框架的边沿和其内容之间留下一小部分间隔。可以使用marginheight和marginwidth属性修改这个间隔的大小。</p> <p><strong>frameborder和bordercolor属性</strong><br> 可以使用frameborder属性对一个单一的框架添加或者删除边框。<br> frameborder可以设置的值为yes | no或1 | 0。<br> bordercolor用来修改单一框架的边框颜色。</p> <p><strong><iframe>标签</strong><br> 可以使用<iframe>标签定义一个内联框架。这个<iframe>标签不是用在<frameset>标签内。相反，它可以出现在文档中任何可以出现<img>标签的地方。<iframe>标签在文档中定义了一个矩形的区域，这这个区域里，浏览器会显示一个单独的文档，包括滚动条和边框。</p> <p><strong><iframe>标签的属性设置</strong><br> <strong>src属性</strong><br> 用来指定占据这个内联框架的文档的URL。</p> <p><strong>align属性</strong><br> 同<table>标签的align属性一样，这个内联框架属性使你能够控制内联在相邻文本的什么地方。当使用top、middle、bottom作为其值时，框架将分别对其在相邻文本的顶端、中间或者底部；当使用left、right作为其值时，框架将分别移动到文本流的左边或者右边，并且文档的其余内容会沿着这个框架显示；如果设置为center，可将这个框架放置在显示画面的中间，文本显示在这个框架的上边和下边。</p> <p><strong>height和width属性</strong><br> 用来设置框架的高度和宽度。</p> <p><strong>其他属性</strong></p> <iframe>的其他属性，包括class、frameborder、id、marginheight、marginwidth、name、scrolling、style、title，他们的设置同<frame>标签完全一致。 <p>一些参考链接：</p> <FRAMESET> [http://www.w3schools.com/tags/tag\_frameset.asp](http://www.w3schools.com/tags/tag_frameset.asp) [http://htmlhelp.com/reference/html40/frames/frameset.html](http://htmlhelp.com/reference/html40/frames/frameset.html) [http://www.dreamdu.com/xhtml/tag\_frameset/](http://www.dreamdu.com/xhtml/tag_frameset/) [http://www.aspxuexi.com/html/2006-8-6/749.htm](http://www.aspxuexi.com/html/2006-8-6/749.htm) <FRAME> [http://htmlhelp.com/reference/html40/frames/frame.html](http://htmlhelp.com/reference/html40/frames/noframes.html) [http://www.gzsums.edu.cn/webclass/html/frame.html](http://www.gzsums.edu.cn/webclass/html/frame.html) [http://www.blabla.cn/html\_tutorials/030\_html\_frame.html](http://www.blabla.cn/html_tutorials/030_html_frame.html) <NOFRAME> [http://htmlhelp.com/reference/html40/frames/noframes.html](http://htmlhelp.com/reference/html40/frames/noframes.html) </div></div><p class="postendmeta"><a href="/posts/框架使用总结" rel="bookmark" class="permalink">永久链接</a></p></div><div id="sidebar"><ul><li class="widget"><h2>Search</h2><form id="searchform" action="/archive" method="get"><input type="search" class="search-text" placeholder="搜索..."></form></li><li class="widget"><h2>Category</h2><ul><li><a href="/categories/other">other (520)</a></li><li><a href="/categories/java-j2ee">java/j2ee (306)</a></li><li><a href="/categories/lnmpa">lnmpa (237)</a></li><li><a href="/categories/sitebuild">sitebuild (143)</a></li><li><a href="/categories/mysql-oracle-postgresql">mysql/oracle/postgresql (126)</a></li><li><a href="/categories/os-software">os/software (74)</a></li><li><a href="/categories/computer">computer (39)</a></li><li><a href="/categories/redis-memcached-mongo">redis/memcached/mongo (31)</a></li><li><a href="/categories/arch-management">arch/management (17)</a></li><li><a href="/categories/mac-iphone-ipad-android">mac/iphone/ipad/android (11)</a></li><li><a href="/categories/python">python (7)</a></li><li><a href="/categories/lnmp">lnmp (3)</a></li><li><a href="/categories/DB-ES">DB/ES (1)</a></li></ul></li><li class="widget"><h2>日志存档</h2><ul class="archive-years"><li><a href="/archive">2026 (2)</a></li><li><a href="/archive">2024 (5)</a></li><li><a href="/archive">2022 (3)</a></li><li><a href="/archive">2020 (5)</a></li><li><a href="/archive">2018 (4)</a></li><li><a href="/archive">2017 (51)</a></li><li><a href="/archive">2016 (102)</a></li><li><a href="/archive">2015 (68)</a></li><li><a href="/archive">2014 (201)</a></li><li><a href="/archive">2013 (483)</a></li><li><a href="/archive">2012 (78)</a></li><li><a href="/archive">2011 (85)</a></li><li><a href="/archive">2010 (78)</a></li><li><a href="/archive">2009 (129)</a></li><li><a href="/archive">2008 (220)</a></li><li><a href="/archive">2007 (1)</a></li></ul></li></ul></div><div class="clear"></div><div class="clear"></div></div></div><div id="footer"></div><div class="copyright">Powered by <a href="https://www.darkmi.com/" target="_blank">https://www.darkmi.com</a></div><!-- 右下角悬浮按钮：主题切换 + 返回顶部 --><div class="bottom-action theme-toggle"><a href="javascript:;" title="切换主题" id="bottom-theme-toggle"><svg class="icon-moon" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>切换主题</title><path d="M10 2c-1.82 0-3.53.5-5 1.35C7.99 5.08 10 8.3 10 12s-2.01 6.92-5 7.65C6.47 20.5 8.18 21 10 21c4.97 0 9-4.03 9-9s-4.03-9-9-9z"></path></svg><svg class="icon-sun" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>切换主题</title><path d="M20 8.69V4h-4.69L12 .69 8.69 4H4v4.69L.69 12 4 15.31V20h4.69L12 23.31 15.31 20H20v-4.69L23.31 12 20 8.69zM12 18c-3.31 0-6-2.69-6-6s2.69-6 6-6 6 2.69 6 6-2.69 6-6 6z"></path></svg></a></div><div class="bottom-action"><a href="javascript:;" title="返回顶部" id="bottom-gotop"><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>返回顶部</title><path d="M4 12l1.41 1.41L11 7.83V20h2V7.83l5.59 5.58L20 12l-8-8-8 8z"></path></svg></a></div><script type="module">document.addEventListener(`DOMContentLoaded`,function(){let e=document.documentElement;function t(t){t===`dark`?(e.classList.add(`dark`),localStorage.setItem(`theme`,`dark`)):(e.classList.remove(`dark`),localStorage.setItem(`theme`,`light`))}function n(){t(e.classList.contains(`dark`)?`light`:`dark`)}let r=localStorage.getItem(`theme`),i=window.matchMedia(`(prefers-color-scheme: dark)`).matches;r?t(r):i&&t(`dark`);let a=document.getElementById(`bottom-theme-toggle`);a&&a.addEventListener(`click`,function(e){e.preventDefault(),n()});let o=document.getElementById(`bottom-gotop`);o&&o.addEventListener(`click`,function(e){e.preventDefault(),window.scrollTo({top:0,behavior:`smooth`})});let s=document.getElementById(`menu-toggle`),c=document.getElementById(`menu`);s&&c&&(s.addEventListener(`click`,function(e){e.stopPropagation();let t=c.classList.toggle(`open`);s.setAttribute(`aria-expanded`,t?`true`:`false`)}),document.addEventListener(`click`,function(e){c.classList.contains(`open`)&&!c.contains(e.target)&&(c.classList.remove(`open`),s.setAttribute(`aria-expanded`,`false`))}))});</script></body></html><script type="module">document.addEventListener(`DOMContentLoaded`,function(){let e=document.getElementById(`post-content`),t=document.querySelectorAll(`.font-size-btn`);t.forEach(function(n){n.addEventListener(`click`,function(){let r=n.getAttribute(`data-size`);e&&r&&(e.className=`post clearfix font-size-`+r),t.forEach(e=>e.classList.remove(`active`)),n.classList.add(`active`)})})});</script>