前端之家收集整理的这篇文章主要介绍了
详解iframe与frame的区别，
前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。
开门见山了，大家需要注意的地方：HTML5不再支持使用frame，iframe只有src 属性
优点:
1.程序调入静态页面比较方便;
2.页面和程序分离;
缺点：
1.iframe有不好之处：样式/脚本需要额外链入，会增加请求。另外用js防盗链只防得了小偷，防不了大盗。
2.iframe好在能够把原先的网页全部原封不动显示下来,但是如果用在首页,是搜索引擎最讨厌的.那么你的网站即使做的在好,也排不到好的名次!如果是动态网页，用include还好点！但是必须要去除他的
<body><a href="https://www.jb51.cc/tag/biaoqian/" target="_blank" class="keywords">标签</a>！
3.框架结构有时会让人感到迷惑，特别是在多个框架中都出现上下、左右滚动条的时候。这些滚动条除了会挤占已经特别有限的<a href="https://www.jb51.cc/tag/yemian/" target="_blank" class="keywords">页面</a>空间外，还会分散访问者的留心力。访问者遇到这种<a href="https://www.jb51.cc/tag/zhandian/" target="_blank" class="keywords">站点</a>往往会立刻转身离开。他们会想，既然你的主页如此混乱，那么<a href="https://www.jb51.cc/tag/zhandian/" target="_blank" class="keywords">站点</a>的其他部分也许更不值得阅读。（这里面本人的观点就是子框架不要出现滚动条，窗口的滚动条只能有由主<a href="https://www.jb51.cc/tag/yemian/" target="_blank" class="keywords">页面</a>来控制）
4.<a href="https://www.jb51.cc/tag/lianjie/" target="_blank" class="keywords">链接</a>导航疑问。运用框架结构时，你必须保证正确配置所有的导航<a href="https://www.jb51.cc/tag/lianjie/" target="_blank" class="keywords">链接</a>，如不然，会给访问者带来很大的麻烦。比如被<a href="https://www.jb51.cc/tag/lianjie/" target="_blank" class="keywords">链接</a>的<a href="https://www.jb51.cc/tag/yemian/" target="_blank" class="keywords">页面</a>出现在导航框架内，这种情况下访问者便被陷住了，因为此时他没有其他地点可去。
5.<a href="https://www.jb51.cc/tag/diaoyong/" target="_blank" class="keywords">调用</a>外部<a href="https://www.jb51.cc/tag/yemian/" target="_blank" class="keywords">页面</a>,需要额外<a href="https://www.jb51.cc/tag/diaoyong/" target="_blank" class="keywords">调用</a>css,给<a href="https://www.jb51.cc/tag/yemian/" target="_blank" class="keywords">页面</a>带来额外的请求<a href="https://www.jb51.cc/tag/cishu/" target="_blank" class="keywords">次数</a>;</p>
<p><span style="color: #0000ff">二、为什么少用iframe</p>
<p> iframes 提供了一个简单的方式把一个网站的<a href="https://www.jb51.cc/tag/neirong/" target="_blank" class="keywords">内容</a>嵌入到另一个网站中。但我们需要慎重的使用iframe。iframe的创建比其它<a href="https://www.jb51.cc/tag/baokuo/" target="_blank" class="keywords">包括</a>scripts和css的 DOM 元素的创建慢了 1-2 个<a href="https://www.jb51.cc/tag/shuliang/" target="_blank" class="keywords">数量</a>级。
</p>
<p> 使用 iframe 的<a href="https://www.jb51.cc/tag/yemian/" target="_blank" class="keywords">页面</a>一般不会包含太多 iframe，所以创建 DOM 节点所花费的时间不会占很大的比重。但带来一些其它的问题：onload 事件以及连接池(connection pool)。
</p>
<p><h3>1.Iframes 阻塞<a href="https://www.jb51.cc/tag/yemian/" target="_blank" class="keywords">页面</a>加载</h3>
</p>
<p> 及时触发 window 的 onload 事件是非常重要的。onload 事件触发使浏览器的 “忙” 指示器停止，告诉<a href="https://www.jb51.cc/tag/yonghu/" target="_blank" class="keywords">用户</a>当前网页已经加载完毕。当 onload 事件加载延迟后，它给<a href="https://www.jb51.cc/tag/yonghu/" target="_blank" class="keywords">用户</a>的感觉就是这个网页非常慢。
</p>
<p> window 的 onload 事件需要在所有 iframe 加载完毕后(包含里面的元素)才会触发。在 Safari 和 Chrome 里，通过 JavaScript 动态设置 iframe 的 SRC 可以避免这种阻塞情况。
</p>
<p><h3>2.唯一的连接池</h3>
</p>
<p> 浏览器只能开少量的连接到web服务器。比较老的浏览器，包含 Internet Explorer 6 & 7 和 Firefox 2，只能对一个域名(hostname)同时打开两个连接。这个<a href="https://www.jb51.cc/tag/shuliang/" target="_blank" class="keywords">数量</a>的限制在新版本的浏览器中有所提高。Safari 3+ 和 Opera 9+ 可同时对一个域名打开 4 个连接，Chrome 1+,IE 8 以及 Firefox 3 可以同时打开 6 个。你可以通过这篇<a href="https://www.jb51.cc/tag/wenzhang/" target="_blank" class="keywords">文章</a>查看具体的数据表：Roundup on Parallel Connections.
</p>
<p> 有人可能希望 iframe 会有自己独立的连接池，但不是这样的。绝大部分浏览器，主<a href="https://www.jb51.cc/tag/yemian/" target="_blank" class="keywords">页面</a>和其中的 iframe 是共享这些连接的。这意味着 iframe 在加载资源时可能用光了所有的可用连接，从而阻塞了主<a href="https://www.jb51.cc/tag/yemian/" target="_blank" class="keywords">页面</a>资源的加载。如果 iframe 中的<a href="https://www.jb51.cc/tag/neirong/" target="_blank" class="keywords">内容</a>比主<a href="https://www.jb51.cc/tag/yemian/" target="_blank" class="keywords">页面</a>的<a href="https://www.jb51.cc/tag/neirong/" target="_blank" class="keywords">内容</a>更重要，这当然是很好的。但通常情况下，iframe 里的<a href="https://www.jb51.cc/tag/neirong/" target="_blank" class="keywords">内容</a>是没有主<a href="https://www.jb51.cc/tag/yemian/" target="_blank" class="keywords">页面</a>的<a href="https://www.jb51.cc/tag/neirong/" target="_blank" class="keywords">内容</a>重要的。这时 iframe 中用光了可用的连接就是不值得的了。一种<a href="https://www.jb51.cc/tag/jiejue/" target="_blank" class="keywords">解决</a>办法是，在主<a href="https://www.jb51.cc/tag/yemian/" target="_blank" class="keywords">页面</a>上重要的元素加载完毕后，再动态设置 iframe 的 SRC。
</p>
<p> 美国前 10 大网站都使用了 iframe。大部分情况下，他们用它来加载广告。这是可以理解的，也是一种符合逻辑的<a href="https://www.jb51.cc/tag/jiejuefang/" target="_blank" class="keywords">解决方</a>案，用一种简单的办法来加载广告服务。但请记住，iframe 会给你的<a href="https://www.jb51.cc/tag/yemian/" target="_blank" class="keywords">页面</a><a href="https://www.jb51.cc/tag/xingneng/" target="_blank" class="keywords">性能</a>带来冲击。只要可能，不要使用 iframe。当确实需要时，谨慎的使用他们。
</p>
<p><span style="color: #0000ff">三、iframe和frame的区别
</p>
<p>1、frame不能脱离frameSet单独使用，iframe可以；
2、frame不能放在body中；
</p>
<p>如下可以正常<a href="https://www.jb51.cc/tag/xianshi/" target="_blank" class="keywords">显示</a>：
</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>
</div>
<p> 如下不能正常<a href="https://www.jb51.cc/tag/xianshi/" target="_blank" class="keywords">显示</a>：
</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>
</div>
<p>3、嵌套在frameSet中的iframe必需放在body中；
如下可以正常<a href="https://www.jb51.cc/tag/xianshi/" target="_blank" class="keywords">显示</a>：
</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>如下不能正常<a href="https://www.jb51.cc/tag/xianshi/" target="_blank" class="keywords">显示</a>：
</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可以随意使用；
</p>
<p>如下均可以正常<a href="https://www.jb51.cc/tag/xianshi/" target="_blank" class="keywords">显示</a>：
</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>
</div>
<p>5、frame的高度只能通过frameSet控制；iframe可以自己控制，不能通过frameSet控制，如：
</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、如果在同一个<a href="https://www.jb51.cc/tag/yemian/" target="_blank" class="keywords">页面</a>使用了两个以上的iframe，在IE中可以正常<a href="https://www.jb51.cc/tag/xianshi/" target="_blank" class="keywords">显示</a>，在firefox中只能<a href="https://www.jb51.cc/tag/xianshi/" target="_blank" class="keywords">显示</a>出第一个(firefox已经改进，这个问题已经不存在了)；使用两个以上的frame在IE和firefox中均可正常</p>
<p><h3>小结：</h3>
</p>
<p>Frame与Iframe两者可以实现的<a href="https://www.jb51.cc/tag/gongneng/" target="_blank" class="keywords">功能</a>基本相同，不过Iframe比Frame具有更多的灵活性。 frame是整个<a href="https://www.jb51.cc/tag/yemian/" target="_blank" class="keywords">页面</a>的框架，iframe是内嵌的网页元素，也可以说是内嵌的框架 Iframe<a href="https://www.jb51.cc/tag/biaoji/" target="_blank" class="keywords">标记</a>又叫浮动帧<a href="https://www.jb51.cc/tag/biaoji/" target="_blank" class="keywords">标记</a>，可以用它将一个HTML文档嵌入在一个HTML中<a href="https://www.jb51.cc/tag/xianshi/" target="_blank" class="keywords">显示</a>。它和Frame<a href="https://www.jb51.cc/tag/biaoji/" target="_blank" class="keywords">标记</a>的最大区别是在网页中嵌入 的<Iframe></Iframe>所包含的<a href="https://www.jb51.cc/tag/neirong/" target="_blank" class="keywords">内容</a>与整个<a href="https://www.jb51.cc/tag/yemian/" target="_blank" class="keywords">页面</a>是一个整体，而<Frame>< /Frame>所包含的<a href="https://www.jb51.cc/tag/neirong/" target="_blank" class="keywords">内容</a>是一个独立的个体，是可以独立<a href="https://www.jb51.cc/tag/xianshi/" target="_blank" class="keywords">显示</a>的。另外，应用Iframe还可以在同一个<a href="https://www.jb51.cc/tag/yemian/" target="_blank" class="keywords">页面</a>中多次<a href="https://www.jb51.cc/tag/xianshi/" target="_blank" class="keywords">显示</a>同一<a href="https://www.jb51.cc/tag/neirong/" target="_blank" class="keywords">内容</a>，而不必重复这段内 容的<a href="https://www.jb51.cc/tag/daima/" target="_blank" class="keywords">代码</a>。</p><i class="glyphicon glyphicon-link"></i> 原文链接：https://www.f2er.com/js/50585.html</div>
<div class="topcard-tags"><a href="https://www.f2er.com/tag/iframeyuframedequbie/" class="tag_link" target="_blank">iframe与frame的区别</a></div>
<ul class="list-group">
<li class="list-group-item"><a href="https://www.f2er.com/js/50586.html" title="浅析JavaScript中的变量复制、参数传递和作用域链">上一篇：浅析JavaScript中的变量复制、参数</a><a href="https://www.f2er.com/js/50583.html" title="简单的JS时钟实例讲解" class="text-muted pull-right">下一篇：简单的JS时钟实例讲解</a>
</li>
</ul>
</div>
</div>
</div>
<!-- row end -->
<div class="row row-sm">
<div class="col-sm-12 col-md-12 col-lg-12">
<div class="card">
<ins class="adsbygoogle"
style="display:block"
data-ad-format="autorelaxed"
data-ad-client="ca-pub-4605373693034661"
data-ad-slot="9144498553"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script></div>
</div>
</div>
<div class="row row-sm">
<div class="col-sm-12 col-md-12 col-lg-12">
<div class="card">
<div class="title"><h1>猜你在找的JavaScript相关文章</h1></div>
<div class="list_con">
<a href="https://www.f2er.com/js/997747.html" title="Javascript中的事件冒泡与捕获"><div class="title">Javascript中的事件冒泡与捕获</div>
<div class="summary">事件冒泡和事件捕获 起因：今天在封装一个bind函数的时候，发现el.addEventListener函数支...</div>
<time class="summary">作者：前端之家 时间：2021-02-22</time>
</a>
</div>
<div class="list_con">
<a href="https://www.f2er.com/js/997746.html" title="搞懂js中小数运算精度问题原因及解决办法"><img class="lazy" src="https://www.f2er.com/images/np.jpg" data-original="https://www.f2er.com/res/2021/02-22/19/e40e1eb184cb2a5d8c5f6c5e730d8e82.png" title="" width="160" height="90" style="float:right;margin-left:30px;display:none;" /><div class="title">搞懂js中小数运算精度问题原因及解决办法</div>
<div class="summary">js小数运算会出现精度问题 js number类型 JS 数字类型只有number类型，number类型相当于其...</div>
<time class="summary">作者：前端之家 时间：2021-02-22</time>
</a>
</div>
<div class="list_con">
<a href="https://www.f2er.com/js/997744.html" title="搞懂：前端跨域问题JS解决跨域问题VUE代理解决跨域问题原理"><div class="title">搞懂：前端跨域问题JS解决跨域问题VUE代理解决跨域问题原理</div>
<div class="summary">什么是跨域 跨域 ： 广义的跨域包含一下内容 ： 1.资源跳转（链接跳转，重定向跳转，表单提...</div>
<time class="summary">作者：前端之家 时间：2021-02-22</time>
</a>
</div>
<div class="list_con">
<a href="https://www.f2er.com/js/997743.html" title="前端对base64编码的理解，原生js实现字符base64编码"><div class="title">前端对base64编码的理解，原生js实现字符base64编码</div>
<div class="summary">@ "TOC" 常见对base64的认知(不完全正确) 首先对base64常见的认知，也是...</div>
<time class="summary">作者：前端之家 时间：2021-02-22</time>
</a>
</div>
<div class="list_con">
<a href="https://www.f2er.com/js/997742.html" title="搞懂：MVVM模型以及VUE中的数据绑定数据劫持发布订阅模式"><div class="title">搞懂：MVVM模型以及VUE中的数据绑定数据劫持发布订阅模式</div>
<div class="summary">搞懂：MVVM模式和Vue中的MVVM模式 MVVM MVVM ： 的缩写，说都能直接说出来 ：模型， ：视图...</div>
<time class="summary">作者：前端之家 时间：2021-02-22</time>
</a>
</div>
<div style="border-bottom: 1px solid #f4f4f4;margin-top:20px;">
<ins class="adsbygoogle"
style="display:block"
data-ad-format="fluid"
data-ad-layout-key="-fr-2o+fp-dx-wx"
data-ad-client="ca-pub-4605373693034661"
data-ad-slot="4561116489"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div><div class="list_con">
<a href="https://www.f2er.com/js/997318.html" title="js判断浏览器是否支持webGL"><div class="title">js判断浏览器是否支持webGL</div>
<div class="summary">起因是我之前开发的网页，用到了three.js制作了一个3d的旋转球体效果。 在各种浏览器上运行...</div>
<time class="summary">作者：前端之家 时间：2021-02-14</time>
</a>
</div>
<div class="list_con">
<a href="https://www.f2er.com/js/997317.html" title="js判断undefined和null"><div class="title">js判断undefined和null</div>
<div class="summary">js判断undefined js判断null js判断null和undefined</div>
<time class="summary">作者：前端之家 时间：2021-02-14</time>
</a>
</div>
<div class="list_con">
<a href="https://www.f2er.com/js/997316.html" title="将文字自动转为banner打印形式的工具"><div class="title">将文字自动转为banner打印形式的工具</div>
<div class="summary">http://patorjk.com/software/taag/</div>
<time class="summary">作者：前端之家 时间：2021-02-14</time>
</a>
</div>
<div class="list_con">
<a href="https://www.f2er.com/js/997315.html" title="聊一聊 bootstrap 的轮播图插件"><div class="title">聊一聊 bootstrap 的轮播图插件</div>
<div class="summary">今天做工作的时候，轻车熟路的做完，又用到了bootstrap的轮播图，觉得有必要安利一下这个插...</div>
<time class="summary">作者：前端之家 时间：2021-02-14</time>
</a>
</div>
<div class="list_con">
<a href="https://www.f2er.com/js/997314.html" title="js实现图片无缝循环跑马灯"><div class="title">js实现图片无缝循环跑马灯</div>
<div class="summary">html 代码 css js代码 function mylsRunHorseLight() { if (mylsTimer != null) { clearIn...</div>
<time class="summary">作者：前端之家 时间：2021-02-14</time>
</a>
</div>
<div style="border-bottom: 1px solid #f4f4f4;margin-top:20px;">
<ins class="adsbygoogle"
style="display:block"
data-ad-format="fluid"
data-ad-layout-key="-fr-2o+fp-dx-wx"
data-ad-client="ca-pub-4605373693034661"
data-ad-slot="4561116489"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div></div>
</div>
</div>
</div>
<!-- left end-->
<!-- right -->
<div class="col-sm-12 col-md-12 col-lg-3">
<!-- row -->
<div class="row row-sm">
<div class="col-sm-12 col-md-12 col-lg-12">
<div class="card">
<label class="main-content-label ">编程分类</label>
<div class="cate mt-20"><a href="https://www.f2er.com/html/" title="HTML">HTML</a><a href="https://www.f2er.com/html5/" title="HTML5">HTML5</a><a href="https://www.f2er.com/js/" title="JavaScript">JavaScript</a><a href="https://www.f2er.com/css/" title="CSS">CSS</a><a href="https://www.f2er.com/jquery/" title="jQuery">jQuery</a><a href="https://www.f2er.com/bootstrap/" title="Bootstrap">Bootstrap</a><a href="https://www.f2er.com/angularjs/" title="Angularjs">Angularjs</a><a href="https://www.f2er.com/typescript/" title="TypeScript">TypeScript</a><a href="https://www.f2er.com/vue/" title="Vue">Vue</a><a href="https://www.f2er.com/dojo/" title="Dojo">Dojo</a><a href="https://www.f2er.com/json/" title="Json">Json</a><a href="https://www.f2er.com/electron/" title="Electron">Electron</a><a href="https://www.f2er.com/nodejs/" title="Node.js">Node.js</a><a href="https://www.f2er.com/extjs/" title="extjs">extjs</a><a href="https://www.f2er.com/express/" title="Express ">Express </a><a href="https://www.f2er.com/xml/" title="XML">XML</a><a href="https://www.f2er.com/es6/" title="ES6">ES6</a><a href="https://www.f2er.com/ajax/" title="Ajax">Ajax</a><a href="https://www.f2er.com/flash/" title="Flash">Flash</a><a href="https://www.f2er.com/unity/" title="Unity">Unity</a><a href="https://www.f2er.com/react/" title="React">React</a><a href="https://www.f2er.com/flex/" title="Flex">Flex</a><a href="https://www.f2er.com/antdesign/" title="Ant Design">Ant Design</a><a href="https://www.f2er.com/webfrontend/" title="Web前端">Web前端</a><a href="https://www.f2er.com/weapp/" title="微信小程序">微信小程序</a><a href="https://www.f2er.com/wxmp/" title="微信公众号">微信公众号</a><div class="clearfix"></div>
</div>
</div>
</div>
</div>
<!-- row end -->
<!-- row -->
<div class="row row-sm">
<div class="col-sm-12 col-md-12 col-lg-12">
<div class="card">
<!-- f2er-rightads -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-4605373693034661"
data-ad-slot="7756441254"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
</div>
</div>
<!-- row end -->
<!-- row -->
<div class="row row-sm">
<div class="col-sm-12 col-md-12 col-lg-12">
<div class="card">
<label class="main-content-label ">最新文章</label>
<ul class="n-list"><li><a href="https://www.f2er.com/js/997747.html" title="Javascript中的事件冒泡与捕获" target="_blank">• Javascript中的事件冒泡与</a></li>
<li><a href="https://www.f2er.com/js/997746.html" title="搞懂js中小数运算精度问题原因及解决办法" target="_blank">• 搞懂js中小数运算精度问题</a></li>
<li><a href="https://www.f2er.com/js/997744.html" title="搞懂：前端跨域问题JS解决跨域问题VUE代理解决跨域问题原理" target="_blank">• 搞懂：前端跨域问题JS解决</a></li>
<li><a href="https://www.f2er.com/js/997743.html" title="前端对base64编码的理解，原生js实现字符base64编码" target="_blank">• 前端对base64编码的理解，</a></li>
<li><a href="https://www.f2er.com/js/997742.html" title="搞懂：MVVM模型以及VUE中的数据绑定数据劫持发布订阅模式" target="_blank">• 搞懂：MVVM模型以及VUE中的</a></li>
<li><a href="https://www.f2er.com/js/997493.html" title="js实现横向跑马灯效果" target="_blank">• js实现横向跑马灯效果</a></li>
<li><a href="https://www.f2er.com/js/997318.html" title="js判断浏览器是否支持webGL" target="_blank">• js判断浏览器是否支持webG</a></li>
<li><a href="https://www.f2er.com/js/997317.html" title="js判断undefined和null" target="_blank">• js判断undefined和null</a></li>
<li><a href="https://www.f2er.com/js/997316.html" title="将文字自动转为banner打印形式的工具" target="_blank">• 将文字自动转为banner打印</a></li>
<li><a href="https://www.f2er.com/js/997315.html" title="聊一聊 bootstrap 的轮播图插件" target="_blank">• 聊一聊 bootstrap 的轮播图</a></li>
</ul>
</div>
</div>
</div>
<!-- row end -->
<!-- row -->
<div class="row row-sm">
<div class="col-sm-12 col-md-12 col-lg-12">
<div class="card">
<label class="main-content-label ">热门标签
<span class="pull-right tx-12">
<a href="https://www.f2er.com/all" target="_blank">更多 ►</a></span>
</label>
<div class="topcard-tags"><a href="https://www.f2er.com/tag/guanbiyangao/" title="关闭广告" target="_blank">关闭广告</a><a href="https://www.f2er.com/tag/danduheaders/" title="单独headers" target="_blank">单独headers</a><a href="https://www.f2er.com/tag/fengzhuangdaima/" title="封装代码" target="_blank">封装代码</a><a href="https://www.f2er.com/tag/tishicuowu/" title="提示错误" target="_blank">提示错误</a><a href="https://www.f2er.com/tag/zhengshuzhengze/" title="整数正则" target="_blank">整数正则</a><a href="https://www.f2er.com/tag/fei0kaitou/" title="非0开头" target="_blank">非0开头</a><a href="https://www.f2er.com/tag/tiaoye/" title="跳页" target="_blank">跳页</a><a href="https://www.f2er.com/tag/chuyema/" title="出页码" target="_blank">出页码</a><a href="https://www.f2er.com/tag/antdtable/" title="antd table" target="_blank">antd table</a><a href="https://www.f2er.com/tag/tishiURLweizhuce/" title="提示URL未注册" target="_blank">提示URL未注册</a><a href="https://www.f2er.com/tag/gongzhonghaozhifu/" title="公众号支付" target="_blank">公众号支付</a><a href="https://www.f2er.com/tag/vuehashmoshi/" title="vue hash模式" target="_blank">vue hash模式</a><a href="https://www.f2er.com/tag/iSlider/" title="iSlider" target="_blank">iSlider</a><a href="https://www.f2er.com/tag/chepaijianpan/" title="车牌键盘" target="_blank">车牌键盘</a><a href="https://www.f2er.com/tag/xunhuantupian/" title="循环图片" target="_blank">循环图片</a><a href="https://www.f2er.com/tag/echartsshuangzhexian/" title="echarts 双折线" target="_blank">echarts 双折</a><a href="https://www.f2er.com/tag/zuoyoubuju/" title="左右布局" target="_blank">左右布局</a><a href="https://www.f2er.com/tag/DllPlugin/" title="DllPlugin" target="_blank">DllPlugin</a><a href="https://www.f2er.com/tag/duixiangchuangjian/" title="对象创建" target="_blank">对象创建</a><a href="https://www.f2er.com/tag/daziyouxi/" title="打字游戏" target="_blank">打字游戏</a><a href="https://www.f2er.com/tag/quanxuan/" title="圈选" target="_blank">圈选</a><a href="https://www.f2er.com/tag/lianglan/" title="两栏" target="_blank">两栏</a><a href="https://www.f2er.com/tag/yunhanshu/" title="云函数" target="_blank">云函数</a><a href="https://www.f2er.com/tag/mengban/" title="蒙版" target="_blank">蒙版</a><a href="https://www.f2er.com/tag/ES2020/" title="ES2020" target="_blank">ES2020</a><a href="https://www.f2er.com/tag/chuchuang/" title="橱窗" target="_blank">橱窗</a><a href="https://www.f2er.com/tag/wufenggundonglunbo/" title="无缝滚动轮播" target="_blank">无缝滚动轮播</a><a href="https://www.f2er.com/tag/sekuaipengzhuang/" title="色块碰撞" target="_blank">色块碰撞</a><a href="https://www.f2er.com/tag/zujianxiaohui/" title="组件销毁" target="_blank">组件销毁</a><a href="https://www.f2er.com/tag/wendangcaozuo/" title="文档操作" target="_blank">文档操作</a></div>
</div>
</div>
</div>
<!-- row end -->
<!-- row -->
<div class="row row-sm">
<div class="col-sm-12 col-md-12 col-lg-12">
<div class="card">
<!-- f2er-rightads -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-4605373693034661"
data-ad-slot="7756441254"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
</div>
</div>
<!-- row end -->
</div>
<!-- right end -->
</div>
</div>
<footer id="footer">
<div class="container">
<div class="row hidden-xs">
<dl class="col-sm-6 site-link">
<dt>最近更新</dt><dd><a href="https://www.f2er.com/win11/1005878.html" title="【联想一体机系统重装指南】" target="_blank">· 【联想一体机系统重装指南】</a><span class="text-muted pull-right">10-03</span></dd>
<dd><a href="https://www.f2er.com/win11/1005877.html" title="笔记本系统重装教程：轻松解决系统问题" target="_blank">· 笔记本系统重装教程：轻松解决系统问题</a><span class="text-muted pull-right">10-03</span></dd>
<dd><a href="https://www.f2er.com/win11/1005876.html" title="重装系统：U盘启动，轻松搞定！" target="_blank">· 重装系统：U盘启动，轻松搞定！</a><span class="text-muted pull-right">10-03</span></dd>
<dd><a href="https://www.f2er.com/win11/1005875.html" title="大白菜u盘重装系统，让你的电脑焕然一新！" target="_blank">· 大白菜u盘重装系统，让你的电脑焕然一新！</a><span class="text-muted pull-right">10-03</span></dd>
<dd><a href="https://www.f2er.com/win11/1005874.html" title="U盘重装系统：轻松启动，快速恢复" target="_blank">· U盘重装系统：轻松启动，快速恢复</a><span class="text-muted pull-right">10-03</span></dd>
<dd><a href="https://www.f2er.com/win11/1005873.html" title="重装电脑系统的步骤及注意事项" target="_blank">· 重装电脑系统的步骤及注意事项</a><span class="text-muted pull-right">10-03</span></dd>
<dd><a href="https://www.f2er.com/win11/1005872.html" title="深度重装系统，一键解决电脑问题" target="_blank">· 深度重装系统，一键解决电脑问题</a><span class="text-muted pull-right">10-03</span></dd>
<dd><a href="https://www.f2er.com/win11/1005871.html" title="重装系统的正确操作步骤，让你的电脑焕然一新" target="_blank">· 重装系统的正确操作步骤，让你的电脑焕然一新</a><span class="text-muted pull-right">10-03</span></dd>
<dd><a href="https://www.f2er.com/win11/1005870.html" title="安全模式重装系统：保障您设备安全的最佳选择" target="_blank">· 安全模式重装系统：保障您设备安全的最佳选择</a><span class="text-muted pull-right">10-03</span></dd>
<dd><a href="https://www.f2er.com/win11/1005869.html" title="戴尔重装系统步骤大全" target="_blank">· 戴尔重装系统步骤大全</a><span class="text-muted pull-right">10-03</span></dd>
</dl>
<dl class="col-sm-4 site-link">
<dt>好站推荐</dt><dd> <a href="https://www.runoob.com" title="菜鸟教程(www.runoob.com)提供了编程的基础技术教程, 介绍了HTML、CSS、Javascript、Python，Java，Ruby，C，PHP , MySQL等各种编程语言的基础知识。 同时本站中也提供了大量的在线实例，通过实例，您可以更好的学习编程。" target="_blank">菜鸟教程</a></dd><dd> <a href="https://www.jb51.cc" title="编程之家(www.jb51.cc)是成立于2017年面向全球中文开发者的技术内容分享平台。提供编程导航、编程问答、编程博文、编程百科、编程教程、编程工具、编程实例等开发者最需要的编程技术内容与开发工具支持，与你一起学习编程，相信编程改变未来！" target="_blank">编程之家</a></dd><dd> <a href="https://www.f2er.com" title="前端之家 f2er.com 前端开发人员所需学习知识手册。" target="_blank">前端之家</a></dd></dl>
<dl class="col-sm-2 site-link">
<dt>商务合作</dt>
<dd><a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=76874919&site=qq&menu=yes">联系我们</a></dd>
</dl>
</div>
<div class="copyright">
Copyright © 2019 前端之家. 当前版本 V7.0.16<br>
<span class="ml5">前端之家 版权所有
<a href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow">闽ICP备13020303号-10</a></span>
</div>
</div>
</footer>
<script type="text/javascript" src="https://www.f2er.com/js/base.js"></script>
</body>
</html>
