html
题目:浏览器内多个标签页之间的通信方式有哪些?
答案:
1、缓存;
比如cookie、sessionStorage、localStorage等;有同源限制
2、使用window.postMessage;
可跨源;
语法:
window.postMessage(data, target)
data:要传递的数据,一般浏览器会自动的把这个数据序列化,所以什么数据都可传递;但有些浏览器不行,故最好还是用JSON.Stringify()处理一下再传递
target:要传递的目标窗口字符串,主要是协议+主机+端口,当窗口路径和target完全匹配时才能接收到数据,一定程度保证了数据的安全性
实例:
子页面传递到父页面
<!-- index.html -->
<iframe src="http://127.0.0.1:5500/frame1.html" frameborder="1"></iframe>
<script>
window.addEventListener('message',function(e){
console.log(e.data)
},false)
</script>
<!-- frame1.html -->
<h1>iframe1 page</h1>
<script>
window.top.postMessage('message from iframe1');
</script>
父页面传递到子页面
<!-- index.html -->
<iframe src="http://127.0.0.1:5500/frame1.html" frameborder="1"></iframe>
<script>
window.onload = function () {
var frame1 = window.frames[0];
frame1.postMessage('message from parentwindow', '*');
}
</script>
<!-- frame1.html -->
<h1>iframe1 page</h1>
<script>
window.addEventListener('message',function(e){
console.log(e.data)
},false)
</script>
css
题目:简述一下优雅降级和渐进增强
答案:
ps:为啥会出现:css3出现后发生的问题,css3的特效十分优秀,但许多低版本浏览器又不兼容而产生的矛盾
优雅降级:
以高级浏览器为主,实现丰富完整的功能,再逐渐的向下兼容低级浏览器
渐进增强:
以低级浏览器为主,先实现最普遍基本的功能,再慢慢向上兼容高级浏览器;目前大部分公司以这个为主