本篇文章主要记录工作中一些具体的使用场景下使用iframe时遇到的一些问题，特此记录。
本文主要记录了三个使用场景：
-
- iframe允许嵌入的视频全屏播放
-
- 在iframe中允许获取系统的摄像头、麦克风等权限
-
- 局部刷新页面中iframe中的内容
1. iframe允许嵌入的视频全屏播放
设置iframe的allowfullscreen属性，设置为true时，可以通过调用 <iframe> 的 requestFullscreen() 方法激活全屏模式。allowfullscreen这是一个历史遗留属性，现在已经被重新定义为 allow="fullscreen"。
旧用法：<iframe src="http://xxx.com" allowfullscreen="true" frameborder="0"></iframe>
新用法：<iframe src="http://xxx.com" allow="fullscreen" frameborder="0"></iframe>
2. 在iframe中允许获取系统的摄像头、麦克风等权限
设置iframe的allow属性,microphone是麦克风的权限，camera是摄像头的权限
用法：<iframe src="http://xxx.com" allow="microphone; camera;" frameborder="0"></iframe>
想要了解该属性所支持的更多的功能权限以及浏览器的兼容性，戳这里 Feature Policy
3. 局部刷新页面中iframe中的内容
可以在页面中iframe外放置一个刷新按钮，给按钮绑定click事件，执行下面的方法，即可实现局部刷新iframe中的内容。
refreshIframe () {
// 获取iframe对象
let iframe = this.$refs.iframe
// 取得iframe的src 并添加一个随机函数，欺骗浏览器，每次请求都是一个新的地址，解决缓存
let iframeSrc = (iframe as any).getAttribute('src') + '?_d=' + Math.random();
// 重新设置iframe的src
(iframe as any).setAttribute('src', iframeSrc)
}
运动时间到。music~
