详解iframe与frame的区别_javascript技巧
时间：2021-07-01 10:21:17
帮助过：5人阅读
开门见山了，大家需要
注意的地方：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;"><script type="text/html" style='display:block'>
<!--<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>--> </script></pre>
<br />
</div>
<p> 如下不能正常显示：<br />
</p>
<div class="jb51code">
<pre class="brush:js;"><script type="text/html" style='display:block'>
<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> </script></pre>
<br />
</div>
<p>3、嵌套在frameSet中的iframe必需放在body中；<br />
如下可以正常显示：<br />
</p>
<div class="jb51code">
<pre class="brush:js;"><script type="text/html" style='display:block'>
<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> </script></pre>
<br />
</div>
<p>如下不能正常显示：<br />
</p>
<div class="jb51code">
<pre class="brush:js;"><script type="text/html" style='display:block'>
<!--<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>--> </script></pre>
</div>
<p>4、不嵌套在frameSet中的iframe可以随意使用；<br />
</p>
<p>如下均可以正常显示：<br />
</p>
<div class="jb51code">
<pre class="brush:js;"><script type="text/html" style='display:block'>
<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>--> </script></pre>
<br />
</div>
<p>5、frame的高度只能通过frameSet控制；iframe可以自己控制，不能通过frameSet控制，如：<br />
</p>
<div class="jb51code">
<pre class="brush:js;"><script type="text/html" style='display:block'>
<!--<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> </script></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还可以在同一个页面中多次显示同一内容，而不必重复这段内 容的代码。 </div>
<div class="">
<ul class="m-news-opt fix">
<li class="opt-item">
<a href='/JavaScript-211497.html' target='_blank'><p>< 上一篇</p><p class="ellipsis">JavaScript继承模式粗探_javascript技巧</p></a>
</li>
<li class="opt-item ta-r">
<a href='/JavaScript-211499.html' target='_blank'><p>下一篇 ></p><p class="ellipsis">分享javascript计算时间差的示例代码_javascript技巧</p></a>
</li>
</ul>
</div>
</div>
</div>
<div class="g-title fix">
<h2 class="title-txt">人气教程排行</h2>
</div>
<div class="m-rank u-dashed mb40">
<ul>
<li class="rank-item">
<a href="/JavaScript-60002.html" title='vue2 设置router-view默认路径的实例' class="item-name ellipsis" target="_blank">
<span class="g-art-count fr">213次</span>
<span class="g-sort-num top">1</span>
vue2 设置router-view默认路径的实例 </a>
</li> <li class="rank-item">
<a href="/JavaScript-56926.html" title='Vue-路由导航菜单栏的高亮设置方法' class="item-name ellipsis" target="_blank">
<span class="g-art-count fr">213次</span>
<span class="g-sort-num second">2</span>
Vue-路由导航菜单栏的高亮设置方法 </a>
</li> <li class="rank-item">
<a href="/JavaScript-56852.html" title='基于Axios 常用的请求方法别名(详解)' class="item-name ellipsis" target="_blank">
<span class="g-art-count fr">213次</span>
<span class="g-sort-num third">3</span>
基于Axios 常用的请求方法别名(详解) </a>
</li> <li class="rank-item">
<a href="/JavaScript-39788.html" title='JavaScript+canvas实现七色板效果实例' class="item-name ellipsis" target="_blank">
<span class="g-art-count fr">213次</span>
<span class="g-sort-num ">4</span>
JavaScript+canvas实现七色板效果实例 </a>
</li> <li class="rank-item">
<a href="/JavaScript-281548.html" title='实现vuex的初始化方法' class="item-name ellipsis" target="_blank">
<span class="g-art-count fr">212次</span>
<span class="g-sort-num ">5</span>
实现vuex的初始化方法 </a>
</li> <li class="rank-item">
<a href="/JavaScript-238997.html" title='jQuery：当鼠标快速移动时无法触发mouseleave事件的问题解决' class="item-name ellipsis" target="_blank">
<span class="g-art-count fr">212次</span>
<span class="g-sort-num ">6</span>
jQuery：当鼠标快速移动时无法触发mouseleave事件的问题解决 </a>
</li> <li class="rank-item">
<a href="/JavaScript-234597.html" title='Array.slice()与Array.splice()的返回值类型_基础知识' class="item-name ellipsis" target="_blank">
<span class="g-art-count fr">212次</span>
<span class="g-sort-num ">7</span>
Array.slice()与Array.splice()的返回值类型_基础知识 </a>
</li> <li class="rank-item">
<a href="/JavaScript-60647.html" title='微信小程序使用swiper组件实现层叠轮播图' class="item-name ellipsis" target="_blank">
<span class="g-art-count fr">212次</span>
<span class="g-sort-num ">8</span>
微信小程序使用swiper组件实现层叠轮播图 </a>
</li> <li class="rank-item">
<a href="/JavaScript-57684.html" title='element-ui 限制日期选择的方法(datepicker)' class="item-name ellipsis" target="_blank">
<span class="g-art-count fr">212次</span>
<span class="g-sort-num ">9</span>
element-ui 限制日期选择的方法(datepicker) </a>
</li> <li class="rank-item">
<a href="/JavaScript-57417.html" title='vue-baidu-map 进入页面自动定位的解决方案(推荐)' class="item-name ellipsis" target="_blank">
<span class="g-art-count fr">212次</span>
<span class="g-sort-num ">10</span>
vue-baidu-map 进入页面自动定位的解决方案(推荐) </a>
</li> <li class="rank-item">
<a href="/JavaScript-54331.html" title='JS实现元素上下左右移动效果' class="item-name ellipsis" target="_blank">
<span class="g-art-count fr">212次</span>
<span class="g-sort-num ">11</span>
JS实现元素上下左右移动效果 </a>
</li> <li class="rank-item">
<a href="/JavaScript-32878.html" title='node.js中的emitter.on方法使用说明' class="item-name ellipsis" target="_blank">
<span class="g-art-count fr">212次</span>
<span class="g-sort-num ">12</span>
node.js中的emitter.on方法使用说明 </a>
</li> <li class="rank-item">
<a href="/JavaScript-251986.html" title='在js中如何实现图片左右滑动' class="item-name ellipsis" target="_blank">
<span class="g-art-count fr">211次</span>
<span class="g-sort-num ">13</span>
在js中如何实现图片左右滑动 </a>
</li> <li class="rank-item">
<a href="/JavaScript-65218.html" title='layui button 按钮弹出提示窗口,确定才进行的方法' class="item-name ellipsis" target="_blank">
<span class="g-art-count fr">211次</span>
<span class="g-sort-num ">14</span>
layui button 按钮弹出提示窗口,确定才进行的方法 </a>
</li> <li class="rank-item">
<a href="/JavaScript-53968.html" title='深入理解Vue生命周期、手动挂载及挂载子组件' class="item-name ellipsis" target="_blank">
<span class="g-art-count fr">211次</span>
<span class="g-sort-num ">15</span>
深入理解Vue生命周期、手动挂载及挂载子组件 </a>
</li> <li class="rank-item">
<a href="/JavaScript-32108.html" title='JS 使用for循环遍历子节点查找元素' class="item-name ellipsis" target="_blank">
<span class="g-art-count fr">211次</span>
<span class="g-sort-num ">16</span>
JS 使用for循环遍历子节点查找元素 </a>
</li> <li class="rank-item">
<a href="/JavaScript-286609.html" title='bootstrap如何设置表单必填' class="item-name ellipsis" target="_blank">
<span class="g-art-count fr">210次</span>
<span class="g-sort-num ">17</span>
bootstrap如何设置表单必填 </a>
</li> <li class="rank-item">
<a href="/JavaScript-286358.html" title='bootstrap4兼容哪些浏览器' class="item-name ellipsis" target="_blank">
<span class="g-art-count fr">210次</span>
<span class="g-sort-num ">18</span>
bootstrap4兼容哪些浏览器 </a>
</li> <li class="rank-item">
<a href="/JavaScript-247980.html" title='jQuery实现追加数组并去重功能' class="item-name ellipsis" target="_blank">
<span class="g-art-count fr">210次</span>
<span class="g-sort-num ">19</span>
jQuery实现追加数组并去重功能 </a>
</li> <li class="rank-item">
<a href="/JavaScript-215560.html" title='jQuery实现的在线答题功能_jquery' class="item-name ellipsis" target="_blank">
<span class="g-art-count fr">210次</span>
<span class="g-sort-num ">20</span>
jQuery实现的在线答题功能_jquery </a>
</li>
</ul>
</div>
</div>
</div>
<!-- / 教程内容页 -->
</div>
</div>
<!-- 页尾 -->
<div class="footer">
本站所有资源全部来源于网络，若本站发布的内容侵害到您的隐私或者利益，请联系我们删除！</div>
<!-- / 页尾 -->
<script type="text/javascript" src="/kan/js/read.js"></script>
<div style="display:none">
<div class="login-box" id="login-dialog">
<div class="login-top"><a class="current" rel="nofollow" id="login1" onclick="setTab('login',1,2);" >登录</a></div>
<div class="login-form" id="nav-signin">
<!-- <div class="login-ico"><a rel="nofollow" class="qq" id="qqlogin" target="_blank" href="/user-center-qqlogin.html"> QQ </a></div> -->
<div class="login-box-form" id="con_login_1">
<form id="loginform" action="/user-center-login.html" method="post" onsubmit="return false;">
<p class="int-text">
<input class="email" id="username" name="username" type="text" value="用户名或Email" onfocus="if(this.value=='用户名或Email'){this.value='';}" onblur="if(this.value==''){this.value='用户名或Email';};" ></p>
<p class="int-text">
<input class="password1" type="password" id="password" name="password" value="******" onBlur="if(this.value=='') this.value='******';" onFocus="if(this.value=='******') this.value='';" >
</p>
<p class="int-info">
<label class="ui-label"> </label>
<label for="agreement" class="ui-label-checkbox">
<input type="checkbox" value="" name="cookietime" id="cookietime" checked="checked" value="2592000">
<input type="hidden" name="notforward" id="notforward" value="1">
<input type="hidden" name="dosubmit" id="dosubmit" value="1">记住我的登录 </label>
<a rel="nofollow" class="aright" href="/user-center-forgetpwd.html" target="_blank"> 忘记密码？ </a></p>
<p class="int-btn"><a rel="nofollow" id="loginbt" class="loginbtn"><span>登录</span></a></p>
</form>
</div>
<form id="regform" action="/user-center-reg.html" method="post">
<div class="login-reg" style="display: none;" id="con_login_2">
<input type="hidden" name="t" id="t"/>
<p class="int-text">
<input id="email" name="email" type="text" value="Email" onfocus="if(this.value=='Email'){this.value='';}" onblur="if(this.value==''){this.value='Email';};"></p>
<p class="int-text">
<input id="uname" name="username" type="text" value="用户名或昵称" onfocus="if(this.value=='用户名或昵称'){this.value='';}" onblur="if(this.value==''){this.value='用户名或昵称';};"></p>
<p class="int-text">
<input type="password" id="pwd" name="password" value="******" onBlur="if(this.value=='') this.value='******';" onFocus="if(this.value=='******') this.value='';"> </p>
<p class="int-text1"><span class="inputbox">
<input id="validate" name="validate" type="text" value="验证码" onfocus="if(this.value=='验证码'){this.value='';}" onblur="if(this.value==''){this.value='验证码';};">
</span><span class="yzm-img"><img src="/user-checkcode-index" alt="看不清楚换一张" id="indexlogin"></p>
<p class="int-info">
<label>
<input value="" name="agreement" id="agreement" CHECKED="checked" type="checkbox">
我已阅读<a rel="nofollow" href="/user-center-agreement.html">用户协议</a>及<a rel="nofollow" href="/user-center-agreement.html">版权声明</a></label>
</p>
<p class="int-btn"><input type="hidden" name="dosubmit"/>
<a rel="nofollow" class="loginbtn" id="register"><span>注册</span></a></p>
</div>
</form>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="/kan/js/foot_js.js"></script>
<script>
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?6dc1c3c5281cf70f49bc0bc860ec24f2";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script>
<script type="text/javascript" src="/layui/layui.js"></script>
<script>
layui.use('code', function() {
layui.code({
elem: 'pre', //默认值为.layui-code
about: false,
skin: 'notepad',
title: 'php怎么实现数据库验证跳转代码块',
encode: true //是否转义html标签。默认不开启
});
});
</script>
</body>
</html> 