每日思考（2019/12/15）

题目概览

iframe框架都有哪些优缺点？
简述你对BFC规范的理解
统计某一字符或字符串在另一个字符串中出现的次数

题目解答

iframe框架都有哪些优缺点？

概念：frame是一种框架，也是一种很常见的网页嵌入方式

<iframe id='ifr1' url='https:xxxxx' width='1080px' height='960px'></iframe>

优点
- iframe能够原封不动的把嵌入的网页展现出来；可以实现异步刷新，单个 iframe 刷新不影响整体窗口的刷新（可以实现无刷新上传，在 FormData 无法使用时）
- 如果有多个网页引用iframe，那么你只需要修改iframe的内容，就可以实现调用的每一个页面内容的更改，方便快捷；网页如果为了统一风格，头部和版本都是一样的，就可以写成一个页面，用iframe来嵌套，可以增加代码的可重用
- 如果遇到加载缓慢的第三方内容如图标和广告，这些问题可以由iframe来解决；可以实现跨域，每个 iframe 的源都可以不相同（方便引入第三方内容）
缺点
- 会产生很多页面，不容易管理；
- iframe框架结构有时会让人感到迷惑，如果框架个数多的话，可能会出现上下、左右滚动条，会分散访问者的注意力，用户体验度差
- 代码复杂，无法被一些搜索引擎索引到，这一点很关键，现在的搜索引擎爬虫还不能很好的处理iframe中的内容，所以使用iframe会不利于搜索引擎优化
- 很多的移动设备（PDA 手机）无法完全显示框架，设备兼容性差
- iframe框架页面会增加服务器的http请求，对于大型网站是不可取的。现在基本上都是用Ajax来代替iframe

简述你对BFC规范的理解

概念：是CSS中的一个渲染机制，BFC就相当于一个盒子，内部的元素与外界的元素互不干扰。它不会影响外部的布局，外部的布局也不会影响到它
形成条件
- float的值不是none
- position 的值不是static或者relative
- display的值是inline-block,table-cell,flex,table-caption或者inline-flex
- overflow的值不是visible
特性
- 内部的盒子会在垂直方向上一个接一个的放置
- 对于同一个BFC的俩个相邻的盒子的margin会发生重叠，与方向无关
- 每个元素的左外边距与包含块的左边界相接触（从左到右），即使浮动元素也是如此
- BFC的区域不会与float的元素区域重叠
- 计算BFC的高度时，浮动子元素也参与计算
- BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然
应用场景
- 解决浮动子元素导致父元素，高度坍塌的问题
- 解决文字环绕在float 四周的情况
- 解决边距重叠问题（父子，兄弟，空元素等）

统计某一字符或字符串在另一个字符串中出现的次数

//方式一：while循环
function strCount(str, target) {
  let count = 0
  if (!target) return count
  while(str.match(target)) {
    str = str.replace(target, '')
    count++
  }
  return count
}
//方式二：数组split
function strCount(str, target) {
    var arr = [];
    arr = str.split(target);
    return arr.length - 1;
}
//方式三：正则匹配
function strCount(str, target) {
    let matchs = str.match(new RegExp(`(?=${target})`, 'g'))
    return matchs ? matchs.length : 0
}

来源：https://www.cnblogs.com/EricZLin/p/12046331.html

标签

iframe

target

bfc