Frame与Iframe两者可以实现的功能基本相同，不过Iframe比Frame具有更多的灵活性，通过本文给大家详解细节iframe与frame的区别，对iframe与frame的区别相关知识感兴趣的朋友一起学习吧
开门见山了，大家需要注意的地方：HTML5不再支持使用frame，iframe只有src 属性
一、使用iframe的优缺点
优点:
1.程序调入静态页面比较方便;
2.页面和程序分离;
缺点：
1.iframe有不好之处：样式/脚本需要额外链入，会增加请求。另外用js防盗链只防得了小偷，防不了大盗。
2.iframe好在能够把原先的网页全部原封不动显示下来,但是如果用在首页,是搜索引擎最讨厌的.那么你的网站即使做的在好,也排不到好的名次!如果是动态网页，用include还好点！但是必须要去除他的
<body>标签！ <br/> 3.框架结构有时会让人感到迷惑，特别是在多个框架中都出现上下、左右滚动条的时候。这些滚动条除了会挤占已经特别有限的页面空间外，还会分散访问者的留心力。访问者遇到这种站点往往会立刻转身离开。他们会想，既然你的主页如此混乱，那么站点的其他部分也许更不值得阅读。（这里面本人的观点就是子框架不要出现滚动条，窗口的滚动条只能有由主页面来控制）<br/> 4.链接导航疑问。运用框架结构时，你必须保证正确配置所有的导航链接，如不然，会给访问者带来很大的麻烦。比如被链接的页面出现在导航框架内，这种情况下访问者便被陷住了，因为此时他没有其他地点可去。<br/> 5.调用外部页面,需要额外调用css,给页面带来额外的请求次数;</p><p><span style="color: #0000ff">二、为什么少用iframe</span></p><p> iframes 提供了一个简单的方式把一个网站的内容嵌入到另一个网站中。但我们需要慎重的使用iframe。iframe的创建比其它包括scripts和css的 DOM 元素的创建慢了 1-2 个数量级。<br/></p><p> 使用 iframe 的页面一般不会包含太多 iframe，所以创建 DOM 节点所花费的时间不会占很大的比重。但带来一些其它的问题：onload 事件以及连接池(connection pool)。<br/></p><p><strong>1.Iframes 阻塞页面加载</strong><br/></p><p> 及时触发 window 的 onload 事件是非常重要的。onload 事件触发使浏览器的 “忙” 指示器停止，告诉用户当前网页已经加载完毕。当 onload 事件加载延迟后，它给用户的感觉就是这个网页非常慢。<br/></p><p> window 的 onload 事件需要在所有 iframe 加载完毕后(包含里面的元素)才会触发。在 Safari 和 Chrome 里，通过 JavaScript 动态设置 iframe 的 SRC 可以避免这种阻塞情况。<br/></p><p><strong>2.唯一的连接池</strong><br/></p><p> 浏览器只能开少量的连接到web服务器。比较老的浏览器，包含 Internet Explorer 6 & 7 和 Firefox 2，只能对一个域名(hostname)同时打开两个连接。这个数量的限制在新版本的浏览器中有所提高。Safari 3+ 和 Opera 9+ 可同时对一个域名打开 4 个连接，Chrome 1+, IE 8 以及 Firefox 3 可以同时打开 6 个。你可以通过这篇文章查看具体的数据表：Roundup on Parallel Connections.<br/></p><p> 有人可能希望 iframe 会有自己独立的连接池，但不是这样的。绝大部分浏览器，主页面和其中的 iframe 是共享这些连接的。这意味着 iframe 在加载资源时可能用光了所有的可用连接，从而阻塞了主页面资源的加载。如果 iframe 中的内容比主页面的内容更重要，这当然是很好的。但通常情况下，iframe 里的内容是没有主页面的内容重要的。这时 iframe 中用光了可用的连接就是不值得的了。一种解决办法是，在主页面上重要的元素加载完毕后，再动态设置 iframe 的 SRC。<br/></p><p> 美国前 10 大网站都使用了 iframe。大部分情况下，他们用它来加载广告。这是可以理解的，也是一种符合逻辑的解决方案，用一种简单的办法来加载广告服务。但请记住，iframe 会给你的页面性能带来冲击。只要可能，不要使用 iframe。当确实需要时，谨慎的使用他们。<br/></p><p><span style="color: #0000ff">三、iframe和frame的区别</span><br/></p><p>1、frame不能脱离frameSet单独使用，iframe可以；<br/> 2、frame不能放在body中；<br/></p><p>如下可以正常显示：<br/></p><div class="jb51code"><pre class="brush:js;"> <!--<body>--><frameset rows="50%,*"> <frame name="frame1" src="http://gongxquan.blog.163.com/test1.htm"/><frame name="frame2" src="http://gongxquan.blog.163.com/test2.htm"/></frameset><!--<body>--></pre><br/></div><p> 如下不能正常显示：<br/></p><div class="jb51code"><pre class="brush:js;"> <body> <frameset rows="50%,*"> <frame name="frame1" src="http://gongxquan.blog.163.com/test1.htm"/><frame name="frame2" src="http://gongxquan.blog.163.com/test2.htm"/></frameset><body> </pre><br/></div><p>3、嵌套在frameSet中的iframe必需放在body中；<br/> 如下可以正常显示：<br/></p><div class="jb51code"><pre class="brush:js;"> <body> <frameset> <iframe name="frame1" src="http://gongxquan.blog.163.com/test1.htm"/><iframe name="frame2" src="http://gongxquan.blog.163.com/test2.htm"/></frameset></body></pre><br/></div><p>如下不能正常显示：<br/></p><div class="jb51code"><pre class="brush:js;"> <!--<body>--><frameset> <iframe name="frame1" src="http://gongxquan.blog.163.com/test1.htm"/><iframe name="frame2" src="http://gongxquan.blog.163.com/test2.htm"/></frameset><!--</body>--></pre></div><p>4、不嵌套在frameSet中的iframe可以随意使用；<br/></p><p>如下均可以正常显示：<br/></p><div class="jb51code"><pre class="brush:js;"> <body> <iframe name="frame1" src="http://gongxquan.blog.163.com/test1.htm"/><iframe name="frame2" src="http://gongxquan.blog.163.com/test2.htm"/></body><!--<body>--><iframe name="frame1" src="http://gongxquan.blog.163.com/test1.htm"/><iframe name="frame2" src="http://gongxquan.blog.163.com/test2.htm"/><!--</body>--></pre><br/></div><p>5、frame的高度只能通过frameSet控制；iframe可以自己控制，不能通过frameSet控制，如：<br/></p><div class="jb51code"><pre class="brush:js;"> <!--<body>--><frameset rows="50%,*"> <frame name="frame1" src="http://gongxquan.blog.163.com/test1.htm"/><frame name="frame2" src="http://gongxquan.blog.163.com/test2.htm"/></frameset><!--</body>--><body> <frameset> <iframe height="30%" name="frame1" src="http://gongxquan.blog.163.com/test1.htm"/><iframe height="100" name="frame2" src="http://gongxquan.blog.163.com/test2.htm"/></frameset></body></pre></div><p>6、如果在同一个页面使用了两个以上的iframe，在IE中可以正常显示，在firefox中只能显示出第一个(firefox已经改进，这个问题已经不存在了)；使用两个以上的frame在IE和firefox中均可正常</p><p><strong><span style="color: #ff0000">小结：</span></strong><br/></p><p>Frame与Iframe两者可以实现的功能基本相同，不过Iframe比Frame具有更多的灵活性。 frame是整个页面的框架，iframe是内嵌的网页元素，也可以说是内嵌的框架 Iframe标记又叫浮动帧标记，可以用它将一个HTML文档嵌入在一个HTML中显示。它和Frame标记的最大区别是在网页中嵌入 的<iframe></iframe>所包含的内容与整个页面是一个整体，而<frame></frame>所包含的内容是一个独立的个体，是可以独立显示的。另外，应用Iframe还可以在同一个页面中多次显示同一内容，而不必重复这段内 容的代码。</p></div><p>以上就是详解iframe与frame的区别的详细内容，更多请关注0133技术站其它相关文章！</p></article><div class="post-actions"><a href="javascript:;" etap="like" class="post-like action action-like" data-pid="0"><i
class="fa fa-thumbs-o-up"></i>赞(<span>0</span>)</a><a href="javascript:;"
class="action action-rewards"
data-event="rewards"><i
class="fa fa-jpy"></i> 打赏</a></div><div class="post-copyright">未经允许不得转载：<a href="/">0133技术站首页</a> » <a href="/cate74/">JavaScript 教程</a></div><!--<div class="article-tags">标签：<a href="/archives/tag/javascript" rel="tag">JavaScript</a><a
href="/archives/tag/%e5%be%ae%e4%bf%a1" rel="tag">微信</a><a
href="/archives/tag/%e5%be%ae%e4%bf%a1%e7%9a%84%e7%89%88%e6%9c%ac%e5%8f%b7" rel="tag">微信的版本号</a><a
href="/archives/tag/%e7%89%88%e6%9c%ac%e5%8f%b7" rel="tag">版本号</a><a
href="/archives/tag/%e8%af%ad%e4%b9%89%e5%8c%96" rel="tag">语义化</a></div>--><nav class="article-nav"><span class="article-nav-prev">上一篇<br><a href="/cate74/111042246979025.html" rel="prev">利用Javascript实现BMI计算器</a></span><span class="article-nav-next">下一篇<br><a href="/cate74/111042267397225.html" rel="next">JS实现的集合去重，交集，并集，差集功能示例</a></span></nav><div class="relates relates-thumb"><div class="title"><h3>相关文章</h3></div><ul><li><a href="/cate74/112731067600.html"><img data-src="https://ss.0133.cn/upload/article/000/000/006/5d2d798d9febd779.jpg-160" alt="如何在JavaScript中使用对象方法？" class="thumb"></a><a href="/cate74/112731067600.html">如何在JavaScript中使用对象方法？</a></li><li><a href="/cate74/112752011600.html"><img data-src="https://ss.0133.cn/upload/article/000/000/006/5d32861c799f7757.png-160" alt="18个用于创建漂亮图表的JavaScript库推荐" class="thumb"></a><a href="/cate74/112752011600.html">18个用于创建漂亮图表的JavaScript库推荐</a></li><li><a href="/cate74/112855793600.html"><img data-src="https://ss.0133.cn/upload/article/000/000/013/5d42bb0686598404.jpg-160" alt="POST 请求的三种常见数据提交格式" class="thumb"></a><a href="/cate74/112855793600.html">POST 请求的三种常见数据提交格式</a></li><li><a href="/cate74/112863815225.html"><img data-src="https://ss.0133.cn/upload/article/000/000/013/5e13e133098fe155.jpg-160" alt="JavaScript基础--引用数据类型 (对象)" class="thumb"></a><a href="/cate74/112863815225.html">JavaScript基础--引用数据类型 (对象)</a></li><li><a href="/cate74/112899244025.html"><img data-src="https://ss.0133.cn/upload/article/000/000/013/5d454d428ac89348.jpg-160" alt="如何在JavaScript中使用字符串？" class="thumb"></a><a href="/cate74/112899244025.html">如何在JavaScript中使用字符串？</a></li><li><a href="/cate74/112916500025.html"><img data-src="https://ss.0133.cn/upload/article/000/000/006/5d47eb8530061725.jpg-160" alt="Window对象在前端领域的角色" class="thumb"></a><a href="/cate74/112916500025.html">Window对象在前端领域的角色</a></li><li><a href="/cate74/112917040100.html"><img data-src="https://ss.0133.cn/upload/article/000/000/001/5f6807e416857960.jpg-160" alt="了解JavaScript中的类" class="thumb"></a><a href="/cate74/112917040100.html">了解JavaScript中的类</a></li><li><a href="/cate74/112938684100.html"><img data-src="https://ss.0133.cn/upload/article/000/000/013/5d4949232b458994.jpg-160" alt="JavaScript中Switch语句的使用方法" class="thumb"></a><a href="/cate74/112938684100.html">JavaScript中Switch语句的使用方法</a></li></ul></div><!--
<div class="title" id="comments"><h3>评论
<small>抢沙发</small></h3></div><div id="respond" class="no_webshot"><form action="return false;" method="post" id="commentform"><div class="comt"><div class="comt-title"><img data-src="https://secure.gravatar.com/avatar/?s=100&d=mm" class="avatar avatar-100"
height="50" width="50"><p><a id="cancel-comment-reply-link" href="javascript:;">取消</a></p></div><div class="comt-box"><textarea placeholder="你的评论可以一针见血" class="input-block-level comt-area" name="comment"
id="comment" cols="100%" rows="3" tabindex="1"
onkeydown="if(event.ctrlKey&&event.keyCode==13){document.getElementById('submit').click();return false};"></textarea><div class="comt-ctrl"><div class="comt-tips"><input type='hidden' name='comment_post_ID' value='6053'
id='comment_post_ID'/><input type='hidden' name='comment_parent' id='comment_parent' value='0'/><p style="display: none;"><input type="hidden" id="akismet_comment_nonce"
name="akismet_comment_nonce" value="40dd7081eb"/></p><label for="comment_mail_notify" class="checkbox inline hide"
style="padding-top:0"><input type="checkbox" name="comment_mail_notify"
id="comment_mail_notify"
value="comment_mail_notify"
checked="checked"/>有人回复时邮件通知我</label><p style="display: none;"><input type="hidden" id="ak_js" name="ak_js" value="245"/></p></div><button type="button" name="submit" id="submit" tabindex="5">提交评论</button>--><!-- <span data-type="comment-insert-smilie" class="muted comt-smilie"><i class="icon-thumbs-up icon12"></i> 表情</span> --><!--
</div></div><div class="comt-comterinfo" id="comment-author-info"><ul><li class="form-inline"><label class="hide" for="author">昵称</label><input class="ipt" type="text" name="author" id="author" value="" tabindex="2" placeholder="昵称"><span class="text-muted">昵称 (必填)</span></li><li class="form-inline"><label class="hide" for="email">邮箱</label><input class="ipt" type="text" name="email" id="email" value="" tabindex="3" placeholder="邮箱"><span class="text-muted">邮箱 (必填)</span></li><li class="form-inline"><label class="hide" for="url">网址</label><input class="ipt" type="text" name="url" id="url" value="" tabindex="4" placeholder="网址"><span class="text-muted">网址</span></li></ul></div></div></form></div>--></div></div><div class="sidebar"><div class="widget widget_ui_tags"><h3>前端开发</h3><div class="items"><a href="/cate72/">HTML 教程</a><a href="/cate73/">CSS 教程</a><a href="/cate74/">JavaScript 教程</a><a href="/cate79/">Vue.js 教程</a><a href="/cate80/">Node.js 教程</a></div></div><form method="get" class="search-form clearfix" id="search-formhybrid-search" target="_blank" action="/search/article/"><div class="search-input-wrap"><input type="text" class="search-text" placeholder="来搜我" name="word" id="search-texthybrid-search"
value="" data-placeholder=""><b class="search-liaosheji"></b><button type="submit" class="search-button"><i class="icon-search"></i></button></div></form><div style="text-align:center;margin:0 auto;"><ul class='hot-search layui-clear'><li style="float:left;margin-right:20px;">热门搜索：</li><li style="float:left;margin-right:20px;"><a href='/search/article/?word=的区别详解'>的区别详解</a></li><li style="float:left;margin-right:20px;"><a href='/search/article/?word=误区详解'>误区详解</a></li><li style="float:left;margin-right:20px;"><a href='/search/article/?word=ps4与ps5的区别'>ps4与ps5的区别</a></li><li style="float:left;margin-right:20px;"><a href='/search/article/?word=pnp与npn的区别'>pnp与npn的区别</a></li><li style="float:left;margin-right:20px;"><a href='/search/article/?word=zigbee与wifi的区别'>zigbee与wifi的区别</a></li></ul></div><br/><div class="widget widget_ui_posts"><h3>置顶推荐</h3><ul><li><a href="/cate99/113256942050000.html"><span class="thumbnail"><img data-src="https://ss.0133.cn/upload/article/000/000/001/61c09166ae006922.jpg" alt="抽审下架是不是废了" class="thumb"></span><span class="text">抽审下架是不是废了</span><span
class="muted">2021-12-20</span></a></li></ul></div><div class="widget widget_recent_entries"><h3>猜你喜欢</h3><ul><li><a href="/cate74/11726722110400.html" target="_blank">For循环中分号隔开的3部分的执行顺序探讨</a><span class="post-date">2021-10-10</span></li><li><a href="/cate74/1191451768100.html" target="_blank">JS控件bootstrap datepicker使用方法详解</a><span class="post-date">2021-09-18</span></li><li><a href="/cate74/1137488664400.html" target="_blank">js贪吃蛇游戏实现思路和源码</a><span class="post-date">2021-09-12</span></li><li><a href="/cate74/1134542041025.html" target="_blank">微信小程序 this和that详解及简单实例</a><span class="post-date">2021-09-11</span></li><li><a href="/cate74/1183356311225.html" target="_blank">微信公众号网页分享功能开发的示例代码</a><span class="post-date">2021-09-17</span></li><li><a href="/cate74/1135637848400.html" target="_blank">微信小程序 框架详解及实例应用</a><span class="post-date">2021-09-11</span></li><li><a href="/cate74/1172054624900.html" target="_blank">Node.js中安全调用系统命令的方法（避免注入安全漏洞）</a><span class="post-date">2021-09-16</span></li><li><a href="/cate74/1190501657225.html" target="_blank">微信小程序 删除项目工程实现步骤</a><span class="post-date">2021-09-18</span></li></ul></div><!--<div class="widget widget_ui_tags"><h3>热门标签</h3><div class="items"><a href="/archives/tag/javascript">JavaScript (324)</a></div></div><div class="widget widget_ui_comments"><h3>最新评论</h3><ul><li><a href="" title=""><img data-src="" class="avatar avatar-100" height="50" width="50"><strong></strong></a></li></ul></div>--></div><div id="leftbar" class="leftbar"><div class="leftbar-con"><div style="text-align: center; width: 160px;"></div></div></div></section><footer class="footer"><div class="container"><p>© 2022 <a href="/">WEB前端开发</a></p><p><a href="/cate88/">工具教程</a> | <a href="/cate71/">前端开发</a> | <a href="/cate61/">常见问题</a> | <a
href="/cate129/">操作系统</a> | <a href="/cate103/">编程</a> | <a href="/cate108/">网络安全</a> | <a href="/cate120/">设计</a> | <a href="/cate137/">站长技巧</a></p><div class="footer-gav" style="margin-bottom: 10px ;font-size: 12px;"><img
src="https://ss.0133.cn/newimg88/2016/06/beian-gov-cn.png" style="vertical-align: middle; height: 14px;"/><a href="https://beian.miit.gov.cn/" target="_blank">鄂ICP备2021014202号-2</a></div><div class="footer-qrcode"></div></div></footer><script> window.jsui = {
www: '',
uri: '/wp-content/themes/dux',
ver: '5.2.5',
roll: ["1", "2"],
ajaxpager: '0',
url_rp: '/about'
};
</script><script type='text/javascript' src='/wp-content/themes/dux/js/libs/bootstrap.min.js?ver=5.2.5'></script><script type='text/javascript' src='/wp-content/themes/dux/js/loader.js?ver=5.2.5'></script><script type='text/javascript' src='/wp-includes/js/wp-embed.min.js?ver=5.0.2'></script><script async="async" type='text/javascript' src='/wp-content/plugins/akismet/_inc/form.js?ver=4.0.8'></script><script type="text/javascript"> var $win = jQuery(window);
var $WindowW = $win.width();
var $threebar = jQuery("#leftbar");
if ($threebar.length) {
var offsetT = $threebar.offset().top;
$win.on("scroll.leftbar", function () {
if ($WindowW >= 1200) {
if ($win.scrollTop() >= (offsetT)) {
$threebar.find(".leftbar-con").css({
"position": "fixed",
"top": 0
});
} else {
$threebar.find(".leftbar-con").css("position", "static")
}
}
});
}
// Array
var imagesArr = [];
$('#article-content').find("img").each(function (index, Element) {
imagesArr.push(Element)
});
mediumZoom(imagesArr, {
margin: 24,
background: '#FFFFFF',
scrollOffset: 0
})
</script><script> (function (i, s, o, g, r, a, m) {
i['GoogleAnalyticsObject'] = r;
i[r] = i[r] || function () {
(i[r].q = i[r].q || []).push(arguments)
}, i[r].l = 1 * new Date();
a = s.createElement(o),
m = s.getElementsByTagName(o)[0];
a.async = 1;
a.src = g;
m.parentNode.insertBefore(a, m)
})(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
ga('create', 'UA-3448069-1', 'css88.com');
ga('send', 'pageview');
</script><script> var _hmt = _hmt || [];
(function () {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?08985692e4db1e8be1cff8097c2979b7";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script><script> (function () {
var bp = document.createElement('script');
var curProtocol = window.location.protocol.split(':')[0];
if (curProtocol === 'https') {
bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
}
else {
bp.src = 'http://push.zhanzhang.baidu.com/push.js';
}
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(bp, s);
})();
</script></body></html>