昨天在某公司笔试中遇到一道题：*iframe的缺点是什么？*我完全不知道如何回答这个问题。虽然之前也遇到过这个问题，但是实际开发中并没有使用过iframe。看了一眼答案，没记住。。。虽然不知道以后会怎么开发我也不会用，但是本着遇到了就不放过的念头，决定学习iframe。以下是W3School对的定义：*iframe元素会创建一个内联框架（即inlineframe），其中包含另一个文档。*其实我不太明白这是什么意思，但是根据我的理解：iframe提供了一种简单的方式将一个网站的内容嵌入到另一个网站中。iframe一般是做什么用的？目前用的最多的是管理后台网站。左侧是菜单列表，右侧是iframe的选项卡。您可以随时打开和关闭页面。在这个系统中，如果将iframe换成div，那么大量页面中的同类型表格、表单等就会使用不同的id和class。因为js是针对body下的所有对象，所以这个系统还是用iframe比较好。js和tagid的定义可以在iframe中自由使用，父页面和菜单列表一般不会刷新，所以iframe带来的内容和一般页面的刷新是一样的。如果我们需要单独的浏览上下文，请使用iframe，否则不要。*iframe通常用于重用部分界面。早期的网站使用iframe，主要用于导航器。为什么？*由于一个网站很多页面的导航栏部分是相同的，所以在iframe中将导航栏和文字分开是一种方便的方式，避免切换页面时重复下载。同时缺点是默认情况下，使用iframe的网站URL不会随着页面的变化而变化。这意味着一旦刷新，网站可能会返回到首页。*那么现在什么时候使用iframe？*因为iframe的页面是独立于parent的，也就是说这是一个独立的区域，不受parent的CSS或者globalJavaScript的影响。典型的，比如WYSIWYGOnlineHTMLEditor，因为他们需要将自己的CSS重新设置为自己的标准，而不是被父CSS覆盖。使用iframe是否是一个好的用法（goodpractice）不能一概而论，但是可以肯定的是现在大多数网站都避免使用这种方式。iframe的优点是上下文隔离，易改，缺点是模块分离。iframe的缺点是蜘蛛可以抓取iframe中的内容，所以SEO优化经常使用div而不是frameiframe会阻塞主页面的Onload事件。iframe和主页面共享连接池，而浏览器对同一域的连接有限制，所以这会影响页面的并行加载。在使用iframe之前需要考虑这两个缺点。如果需要使用iframe，最好通过javascript动态的给iframe添加src属性值，这样可以绕过以上两个问题。目前国内那些网站都是在QQ邮箱网易云音乐底部使用iframe。W3School的代码测试页参考自：知乎问答-Iframe的优缺点是什么？国内哪些知名网站还在使用iframe，为什么？以前丢弃的是什么？为什么？</p> </div> </div> <div class="zuowen_sxy"> <div class="prev">上一篇：<a title="Flexbox入门教程" href="/webqianduan/235771.html">Flexbox入门教程</a> </div> <div class="prev">下一篇：<a title="第八条：采访总结" href="/webqianduan/235773.html">第八条：采访总结</a> </div> </div> <div class="related_about"> <div class="related_about_t"><code>说起iframe相关文章</code></div> <ul> <li><a href="/linux/260452.html" target="_blank" title="每天学一个Linux命令（43）：dmesg">每天学一个Linux命令（43）：dmesg</a></li> <li><a href="/linux/259975.html" target="_blank" title="每天学一个Linux命令（62）：ping">每天学一个Linux命令（62）：ping</a></li> <li><a href="/linux/259841.html" target="_blank" title="每天学一个Linux命令（31）：md5sum">每天学一个Linux命令（31）：md5sum</a></li> <li><a href="/linux/259833.html" target="_blank" title="每天学一个Linux命令（22）：pwd">每天学一个Linux命令（22）：pwd</a></li> <li><a href="/linux/259578.html" target="_blank" title="js获取当前时间（昨天，今天，明天）">js获取当前时间（昨天，今天，明天）</a></li> <li><a href="/linux/258285.html" target="_blank" title="每天学一个Linux命令（56）：su-sudo">每天学一个Linux命令（56）：su-sudo</a></li> <li><a href="/linux/258274.html" target="_blank" title="每天学一个Linux命令（32）：sort">每天学一个Linux命令（32）：sort</a></li> <li><a href="/linux/258243.html" target="_blank" title="每天学一个Linux命令（44）：uptime">每天学一个Linux命令（44）：uptime</a></li> <li><a href="/linux/258171.html" target="_blank" title="每天学一个Linux命令（十七）：chmod">每天学一个Linux命令（十七）：chmod</a></li> <li><a href="/linux/257996.html" target="_blank" title="每天学一个Linux命令（48）：top">每天学一个Linux命令（48）：top</a></li> <li><a href="/linux/257791.html" target="_blank" title="每天学一个Linux命令（21）：tree">每天学一个Linux命令（21）：tree</a></li> <li><a href="/linux/257663.html" target="_blank" title="每天学一个Linux命令（25）：more">每天学一个Linux命令（25）：more</a></li> <li><a href="/linux/257587.html" target="_blank" title="大白话帮你理解Docker">大白话帮你理解Docker</a></li> <li><a href="/linux/256924.html" target="_blank" title="每天学一个Linux命令（30）：cut">每天学一个Linux命令（30）：cut</a></li> <li><a href="/linux/256903.html" target="_blank" title="每天学一个Linux命令（37）：paste">每天学一个Linux命令（37）：paste</a></li> <li><a href="/linux/256690.html" target="_blank" title="这件事要从nodenode.js说起">这件事要从nodenode.js说起</a></li> <li><a href="/linux/256536.html" target="_blank" title="单机容器网络">单机容器网络</a></li> <li><a href="/linux/256297.html" target="_blank" title="每天学一个Linux命令（16）：mkdir">每天学一个Linux命令（16）：mkdir</a></li> <li><a href="/linux/256281.html" target="_blank" title="每天学一个Linux命令（24）：chattr-lsattr">每天学一个Linux命令（24）：chattr-lsattr</a></li> <li><a href="/linux/256278.html" target="_blank" title="深入理解C++对象模型（入门）--从虚继承说起">深入理解C++对象模型（入门）--从虚继承说起</a></li> </ul> </div> </div> <div class="main-right"> <div class="right_fix"> <div class="r_con"> <div class="r_title">最新推荐</div> <ul> <li><em>1</em><a href="/kejifunen/361257.html" title="LG Watch Urbane 第一印象" target="_blank">LG Watch Urbane 第一印象</a></li> <li><em>2</em><a href="/kejifunen/358710.html" title="冬奥可穿戴新世界" target="_blank">冬奥可穿戴新世界</a></li> <li><em>3</em><a href="/kejifunen/356731.html" title="先从奥巴马总统佩戴可穿戴设备说起" target="_blank">先从奥巴马总统佩戴可穿戴设备说起</a></li> <li><em>4</em><a href="/kejifunen/356085.html" title="观看苹果虚拟现实的昨天、今天和明天" target="_blank">观看苹果虚拟现实的昨天、今天和明天</a></li> <li><em>5</em><a href="/kejifunen/354690.html" title="华为Mate 8-华为Watch昨天双双开售，售价2999元" target="_blank">华为Mate 8-华为Watch昨天双双开售，售价2999元</a></li> <li><em>6</em><a href="/kejifunen/348664.html" title="先从Misfit收购事件说起吧！可穿戴设备市场远未成熟" target="_blank">先从Misfit收购事件说起吧！可穿戴设备市场远未成熟</a></li> <li><em>7</em><a href="/kejifunen/338868.html" title="阅文高热门小说《第一序列》昨天杀青，IP宇宙开发指日可待" target="_blank">阅文高热门小说《第一序列》昨天杀青，IP宇宙开发指日可待</a></li> <li><em>8</em><a href="/jishuluodi/328735.html" title="前一天新增病例为零，昨天新增病例两例，吉林疫情为何再度反弹？" target="_blank">前一天新增病例为零，昨天新增病例两例，吉林疫情为何再度反弹？</a></li> <li><em>9</em><a href="/jishuluodi/326435.html" title="澳大利亚有哪些富豪？ " target="_blank">澳大利亚有哪些富豪？ </a></li> <li><em>10</em><a href="/jishuluodi/319761.html" title="昨天，我第一次在特价店买了一双鞋，但是还没有发货， 2号就开" target="_blank">昨天，我第一次在特价店买了一双鞋，但是还没有发货， 2号就开</a></li> </ul> </div> <div class="r_con"> <div class="r_title">猜你喜欢</div> <ul class="you_like"> <li><em>1</em><a href="/shumafazhan/310028.html" title="vivo Y50开售1698元" target="_blank">vivo Y50开售1698元</a></li> <li><em>2</em><a href="/shumafazhan/310025.html" title="荣耀路由器3 SE开售199元" target="_blank">荣耀路由器3 SE开售199元</a></li> <li><em>3</em><a href="/shumafazhan/309808.html" title="荣耀平板X8开售，1199元起" target="_blank">荣耀平板X8开售，1199元起</a></li> <li><em>4</em><a href="/shumafazhan/303325.html" title="iOS 15.1 正式版发布" target="_blank">iOS 15.1 正式版发布</a></li> <li><em>5</em><a href="/shumafazhan/299759.html" title="傲游5.1.5.2正式版发布" target="_blank">傲游5.1.5.2正式版发布</a></li> <li><em>6</em><a href="/shumafazhan/298265.html" title="迅雷9.1.47正式版发布" target="_blank">迅雷9.1.47正式版发布</a></li> <li><em>7</em><a href="/kejidiedai/296443.html" title="没有launch途径怎么办？需要从一个程序员的困境说起" target="_blank">没有launch途径怎么办？需要从一个程序员的困境说起</a></li> <li><em>8</em><a href="/shumafazhan/294196.html" title="HTC VIVE 昨天开始全面开放预购，售价 6888 元 " target="_blank">HTC VIVE 昨天开始全面开放预购，售价 6888 元 </a></li> <li><em>9</em><a href="/shumafazhan/293894.html" title="华为全系列芯片亮相" target="_blank">华为全系列芯片亮相</a></li> <li><em>10</em><a href="/bianchengyuyan/263575.html" title="如何使用ASP.NETMVC将网页加载到iframe中？Sh" target="_blank">如何使用ASP.NETMVC将网页加载到iframe中？Sh</a></li> <li><em>11</em><a href="/bianchengyuyan/263330.html" title="仅在safari浏览器中ASP.net MVC中的IFram" target="_blank">仅在safari浏览器中ASP.net MVC中的IFram</a></li> <li><em>12</em><a href="/linux/262932.html" title="每天学一个Linux命令（60）：scp" target="_blank">每天学一个Linux命令（60）：scp</a></li> <li><em>13</em><a href="/linux/262606.html" title="每天学一个Linux命令（64）：ifconfig" target="_blank">每天学一个Linux命令（64）：ifconfig</a></li> <li><em>14</em><a href="/linux/262363.html" title="每天学一个Linux命令（20）：find" target="_blank">每天学一个Linux命令（20）：find</a></li> <li><em>15</em><a href="/linux/261865.html" title="每天学一个Linux命令（49）：free" target="_blank">每天学一个Linux命令（49）：free</a></li> <li><em>16</em><a href="/linux/261150.html" title="每天学一个Linux命令（47）：df" target="_blank">每天学一个Linux命令（47）：df</a></li> <li><em>17</em><a href="/linux/260916.html" title="每天学一个Linux命令（53）：who" target="_blank">每天学一个Linux命令（53）：who</a></li> <li><em>18</em><a href="/linux/260830.html" title="每天学一个Linux命令（33）：uniq" target="_blank">每天学一个Linux命令（33）：uniq</a></li> <li><em>19</em><a href="/linux/260776.html" title="每天学一个Linux命令（59）：ssh" target="_blank">每天学一个Linux命令（59）：ssh</a></li> <li><em>20</em><a href="/linux/260744.html" title="每天学一个Linux命令（50）：date" target="_blank">每天学一个Linux命令（50）：date</a></li> </ul> </div> </div> </div> </div> <div class="related_article"></div> <div class="footer"> <p>Copyright © 2012-2022 程序源 版权所有<a href="https://beian.miit.gov.cn/" rel="nofollow" target="_blank">豫ICP备2022028201号</a></p> <p>重要申明：本站所有的文章、图片、评论等，均由网友发表或上传并维护或收集自网络，属个人行为，与本站立场无关。 如果侵犯了您的权利，请与我们联系，我们将在24小时内进行处理、任何非本站因素导致的法律后果，本站均不负任何责任。</p> </div> <!-- 应用插件标签 start --> <!-- 应用插件标签 end --> </body> </html>
