iframe/frameset/frame的区别 目录iframeiframe属性的用法iframe属性的取值iframe的书写格式framesetframeset的用法（框架模板）frameset属性的属性值frameframe的作用frame标签的属性总结补充的优缺点</a></li><li><a href="#iframe与frameset的相同点和不同点"><iframe>与frameset的相同点和不同点</a></li></ul></li></ul></div></p> <h2 id="iframe">iframe</h2> <h3 id="iframe属性的用法">iframe属性的用法</h3> <pre><code class="language-html"><iframe>标签规定一个内联框架。内联框架可以在当前的HTML文档中插入框架，框架内可以链接另一个页面 </code></pre> <p>它是 一个围堵标记，但围着的字句只有在浏览器不支援 iframe 标记时才会显示。</p> <pre><code class="language-html"><body> <iframe src="https://www.baidu.com"></iframe> </body> </code></pre> <p><img src="https://i.loli.net/2019/12/09/LRWtK1vAJopS6Fg.png" alt="" loading="lazy"></p> <p><strong>注意：</strong>所有的浏览器都支持iframe属性，可以把需要的文本放置在<code><iframe></code>和 <code></iframe> </code>之间，这样就可以应对无法理解 <code><iframe> </code>的浏览器。</p> <p>要使用css来为<code><iframe></code>定义样式</p> <h3 id="iframe属性的取值">iframe属性的取值</h3> <ul> <li>frameborder 规定是否显示框架周围的边框，取值为1或0。（取值为1有边框，取值为0没有边框）也可以是yes或no。</li> <li>height / width 规定框架的高度和宽度（取值px或%）</li> <li>src 规定在框架中所显示的文档的URL</li> <li>scrolling 规定是否在框架中显示滚动条（取值yes显示，no不显示，auto自动判断）</li> <li>align 规定框架的对齐方式（取值left、right、top、middle、bottom）</li> <li>name 规定内联框架的名称</li> <li>marginheight 框架顶部和底部的外边距（取值pixel像素）</li> <li>marginwidth 框架左侧和右侧的外边距（取值pixel像素）</li> </ul> <h3 id="iframe的书写格式">iframe的书写格式</h3> <p>里面的内容只有在浏览器不支持iframe标记时才会显示出来</p> <pre><code class="language-html"><iframe src="iframe.html" height="100px" width="300px" marginheight=1px marginwidth=1px name="ibox" align="middle" frameborder=1>哈哈啊</iframe> </code></pre> <p><font color = red>iframe支持HTML全局属性，也支持事件属性</font></p> <h2 id="frameset">frameset</h2> <h3 id="frameset的用法（框架模板）">frameset的用法（框架模板）</h3> <p>frameset可以定义一个框架集。被用来组织多个框架，每一个框架都有着独立的文档。在frameset的简单应用中，frameset使用cols或rows属性来规定在框架中存在多少行多少列。</p> <pre><code class="language-html"><html> <head></head> <frameset> <frame src=""> <frame src=""> </frameset> </html> </code></pre> <p><strong>！注意：</strong>利用frameset和frame可以把网页制作成所需要的不同大小的框架，可以用来布局。</p> <p>不能与 <code><frameset></frameset> </code>标签一起使用 <code><body></body> </code>标签。当需要为不支持框架的浏览器添加一个<code><noframes></code>标签时，则必须在<code><noframes></code>中嵌套<code><body></code>标签，那样<code><noframes></code>标签中的内容才会被显示出来。</p> <h3 id="frameset属性的属性值">frameset属性的属性值</h3> <p>cols 定义框架集中的列的数目和尺寸（取值px、% 和 *）</p> <p>rows 定义框架集中的行的数目和尺寸（取值px、% 和 *）</p> <p><strong>注意：</strong>这两个属性都接受用引号括起来并用逗号分开的值列表，这些数值指定了框架的绝对（像素点）或相对（百分比或其余空间）宽度（对列而言），或者绝对或相对高度（对行而言）。这些属性值的数目决定了浏览器将会在文档窗口中显示多少行或列的框架。</p> <p><strong>实例：</strong></p> <p>1、构建三行框架（因为rows有三个值），三行的高度分别为150px，300px，150px（三行高度为1:2:1）</p> <pre><code class="language-html"><frameset rows="150,300,150"> </code></pre> <p>除非浏览器窗口正好为600px，否则浏览器就会自动按照（三行高度比例1:2:1）延伸或压缩第一个和最后一个框架，上下两个框架占据1/4的窗口空间；中间的框架会占据剩下1/2的空间。</p> <pre><code class="language-html"><frameset rows="25%,50%,25%"> </code></pre> <p>如果设置的百分比加起来不是100%（如20%，40%，20%），浏览器也会按照之间的比例进行重新给出尺寸以消除差异。</p> <p>2、在<code><frameset></code>标签的cols和rows值中加入星号 * 的用法。*指示浏览器要在相邻的框架放入框架集之后，剩下的空间分配给各自的行或列。</p> <p>会生成有固定宽度100px的框架列，和另一个框架列，这个框架列会占据框架集中剩下的所有空间。</p> <pre><code><frameset cols="100,*,*"> </code></pre> <p>3、对多个列或行属性值使用星号。在这样的情况下，相应的行或列将对可用空间进行等分。</p> <pre><code><frameset cols="*,100,*"> </code></pre> <p>生成三列，中间一列固定宽度100px，左右两侧分别生成尺寸相同的两列。等分剩下的空间。</p> <p>4.如果在星号前放置一个整数值，相应的行或列就会相对地获得更多的可用空间</p> <pre><code><frameset rows="100,3*,*,*"> </code></pre> <p>生成四行框架，第一行框架集的10%。浏览器把框架集剩下的空间3/5分配给第二个框架，剩下两行各分1/5.</p> <p><strong>补充</strong>：<strong>noframes标签</strong></p> <p><strong>当浏览器完全显示不出这个框架时，页面就会显示出<code><noframes></noframes></code>内的内容。<code><noframes></code> 元素位于<code> <frameset></code> 元素内部。</strong></p> <pre><code class="language-html"><frameset>如果浏览器有能力处理框架，就不会显示出 frameset 元素中的文本。</frameset> </code></pre> <p><strong>如果希望在<code><frameset></code>标签中使用<code><noframes></code>标签，就必须要把<code><noframes></code>的内容包含在<code><body></body></code>中；</strong></p> <pre><code class="language-html"><frameset cols = "25%, 25%,*"> <noframes> <body>Your browser does not handle frames!</body> </noframes> <frame src ="venus.htm" /> <frame src ="sun.htm" /> <frame src ="mercur.htm" /> </frameset> </code></pre> <h2 id="frame">frame</h2> <h3 id="frame的作用">frame的作用</h3> <p><code><frame></code>定义frameset中的一个特定的窗口。只设定某一个框架窗口的特定属性。</p> <p><strong>注意：</strong><code><frame></code>标签一定要和<code><frameset></code>标签一起合用。frame是自闭合标签没有结束标签。</p> <pre><code class="language-html"><html> <frameset cols="25%,50%,25%"> <frame src=" " /> <frame src=" " /> <frame src=" " /> </frameset> </html> </code></pre> <h3 id="frame标签的属性">frame标签的属性</h3> <ul> <li><strong>frameborder</strong> 规定是否显示框架周围的边框，取值为1或0。(取值为1有边框，取值为0没有边框)也可以是yes或no。</li> <li><strong>noresize</strong> 规定用户无法调整框架的大小（noresize="noresize"）</li> <li><strong>src</strong> 规定在框架中所显示的文档的URL</li> <li><strong>scrolling</strong> 规定是否在框架中显示滚动条（取值yes显示，no不显示，auto自动判断）</li> <li><strong>name</strong> 规定内联框架的名称</li> <li><strong>marginheight</strong> 框架顶部和底部的外边距（取值pixel像素）</li> <li><strong>marginwidth</strong> 框架左侧和右侧的外边距（取值pixel像素）</li> </ul> <p><strong>三、实例</strong></p> <p>1、不能调整框架的大小</p> <p>设置了noresize属性的框架不可以调整大小，当把鼠标移动到框架的表上时会发现边框不可以移动。</p> <pre><code class="language-html"><html> <frameset> <frame src="nav.html" noresize="noresize"/> <frame src="main.html"/> <frame src="content.html"/> </frameset> </html> </code></pre> <h2 id="总结">总结</h2> <p>经过上面的分析，总结iframe、frame、frameset三者之间的区别和联系。</p> <p>1、frame不能脱离frameset单独使用，而iframe可以单独使用</p> <p>2、frameset不能放在body标签中，frame嵌套在frameset中如果放在body中不能正常显示。（frameset和frame只规定了框架如何划分，不会显示任何内容，所以不需要放在body中）</p> <p>3、iframe嵌套在frameset标签中，则必须放在body标签中，否则无法显示。（iframe用来显示引用的其他页面的内容，需要被显示，放在body中）</p> <p>4、frame不能调整框架的宽高，只能通过frameset间接设置；iframe可以通过width和height属性来调整宽高，不能通过frameset控制</p> <p>5、frameset不能被浏览器解读的时候，如果里面设置了noframes就会显示出来noframes标签内的内容。</p> <p>6、iframe 可以放到表格里面。frame 则不行。</p> <pre><code class="language-html"><table> <tr> <td><iframe id="" src=""></iframe></td> </tr> </table> </code></pre> <h2 id="补充">补充</h2> <h3 id="iframe的优缺点"><code><iframe></code>的优缺点</h3> <p><code><iframe></code>优点：</p> <ul> <li>解决加载缓慢的第三方内容如图标和广告等的加载问题</li> <li>Security sandbox</li> <li>并行加载脚本</li> </ul> <p><code><iframe></code>的缺点：</p> <ul> <li> <p>iframe会阻塞主页面的Onload事件；</p> </li> <li> <p>即使内容为空，加载也需要时间</p> </li> <li> <p>没有语意</p> </li> <li> <p>iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载</p> <p>使用iframe之前需要考虑缺点。如果需要使用iframe，最好是通过javascript动态给iframe添加src属性值，这样可以绕开以上问题</p> </li> </ul> <h3 id="iframe与frameset的相同点和不同点"><code><iframe></code>与<code>frameset</code>的相同点和不同点</h3> <p>相同点：<br> iframe 和frameset都是html布局的框架布局<br> 不同点：<br> iframe是一个内联框架，是在页面里生成内部框架<br> frameset定义一个框架集，包含多个子框架，每个框架都是独立的文档</p>