前端3+1-9

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的特效十分优秀，但许多低版本浏览器又不兼容而产生的矛盾
优雅降级：
以高级浏览器为主，实现丰富完整的功能，再逐渐的向下兼容低级浏览器
渐进增强：
以低级浏览器为主，先实现最普遍基本的功能，再慢慢向上兼容高级浏览器；目前大部分公司以这个为主