题目概览
- 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 属性：
<!DOCTYPE html> <html> <head> <script src="test1.js" defer="defer"></script> <script src="test2.js" defer="defer"></script> </head> <body> <!-- 这里放内容 --> </body> </html> -
async 属性
<!DOCTYPE html> <html> <head> <script src="test1.js" async></script> <script src="test2.js" async></script> </head> <body> <!-- 这里放内容 --> </body> </html> -
动态创建DOM方式
//这些代码应被放置在</body>标签前(接近HTML文件底部) <script type="text/javascript"> function downloadJSAtOnload() { varelement = document.createElement("script"); element.src = "defer.js"; document.body.appendChild(element); } if (window.addEventListener) window.addEventListener("load",downloadJSAtOnload, false); else if (window.attachEvent) window.attachEvent("onload",downloadJSAtOnload); else window.onload =downloadJSAtOnload; </script> -
使用jQuery的getScript方法
$.getScript("outer.js",function(){//回调函数，成功获取文件后执行的函数 console.log("脚本加载完成") }); -
使用setTimeout延迟方法
-
让JS最后加载：把js外部引入的文件放到页面底部，来让js最后引入，从而加快页面加载速度