样式兼容问题及iframe标签通信

一、css兼容问题（ios字体有轻微重影）
1、ios与Android字体渲染不一致（ios的字体会出现轻微的重影）

font-family:  DINAlternate-Bold ;
font-weight: bold;

2、Android端点击button会有橙色的边框

button:focus{
    outline: none;
}

3、去除iOS中的a、div等标签点击的瞬间有阴影出现

a:focus {
  -webkit-tap-highlight-color:rgba(0,0,0,0) !important;
  -webkit-tap-highlight-color: transparent !important;
}
div:focus {
  -webkit-tap-highlight-color:rgba(0,0,0,0) !important;
  -webkit-tap-highlight-color: transparent !important;
}
button:focus {
  -webkit-tap-highlight-color:rgba(0,0,0,0) !important;
  -webkit-tap-highlight-color: transparent !important;
}

// 可直接试试
*:focus{
  -webkit-tap-highlight-color:rgba(0,0,0,0) !important;
  -webkit-tap-highlight-color: transparent !important;
}

二、iframe标签传值

1、跨页面传输数据。

// 实现不同页面之间的通信(可实现任何页面之间的通信)
// 实现任何页面之间都能通信的前提是window.parent.postMessage(data, targetOrigin)中的targetOrigin的值为'*'
window.parent.postMessage({}, '*')

// 实现同源页面之间的通信
new BroadcastChannel('键').postMessage('值')

2、跨页面接收数据

// 两种监听方式，同等效果
window.addEventListener('message', function (e) {
    if(e.data.键 === 键){
        // 处理逻辑
    }
})

window.onmessage = function (e) {
    if(e.data.键 === 键){
        // 处理逻辑
    }
})

3、去除iframe的缓存问题
    动态创建和销毁iframe（可能存在渲染不及时的问题）
    使用v-if(再vue的项目里面使用，本质上跟动态创建和删除差不多)

 <iframe class="content" v-if="isFrame"></iframe>

//...

<script>
export default {
    data(){
        return {
            isFrame: true    // 通过动态更改 isViewFrame 的值，去创建和删除iframe
        }
    }
}
</script>