每日思考（2020/08/14）

题目概览

• iframe的使用场景有哪些
• 怎么让body高度自适应屏幕
• js延迟加载的方式有哪些

题目解答

iframe的使用场景有哪些

• 典型系统结构，左侧是功能树，右侧就是一些常见的table或者表单之类的。为了每一个功能，单独分离出来，采用iframe
• ajax上传文件：iframe实现Ajax文件上传效果示例
• 加载别的网站内容，例如google广告，网站流量分析
• 在上传图片时，不用flash实现无刷新
• 跨域访问的时候可以用到iframe，使用iframe请求不同域名下的资源

怎么让body高度自适应屏幕

• DOM 元素的 height 当设为百分比时，只有当父元素有一个定高的值时才会生效，否则不起作用

• 要让 body 高度自适应就必须要在 html 上设置定高。而 html 的父级就是浏览器，html 的宽高由浏览器决定。浏览器的宽高是定值，因此需要给 html 和 body 同时设置 100%

  html,body{
      height:100%
  }
  

• 另外也可以给 body 设置一个 min-height: 100vh; 让 body在高度不够时可以撑满整个屏幕。（做验证可以使用 border，background 即便是高度不足时，浏览器也会填满颜色

  body{
  	min-height: 100vh;
  }
  

js延迟加载的方式有哪些

• defer 属性：

• async 属性

• 动态创建DOM方式

  //这些代码应被放置在标签前(接近HTML文件底部)
  
  

• 使用jQuery的getScript方法

  $.getScript("outer.js",function(){//回调函数，成功获取文件后执行的函数
  	console.log("脚本加载完成")
  });
  

• 使用setTimeout延迟方法

• 让JS最后加载：把js外部引入的文件放到页面底部，来让js最后引入，从而加快页面加载速度