内容：
- iframe 全屏显示
- 通过代码切换 iframe 中的页面
- iframe 中页面调用父页面中的方法
iframe 元素会创建包含另外一个文档的内联框架（即行内框架）。 在多页面开发中经常会用到。
1.iframe 全屏显示
如果需要在页面中控制 iframe 的高度和宽度，则必须将所在页面的高度和宽度先调整为 100%；如：
html, body, #app {
height: 100%;
width: 100%;
}100% 也可以写成 100vh、100vw。
然后通过 css 来调整 iframe 的大小，如：
.frame {
margin: 12px;
width: calc(100vw - 26px);
height: calc(100vh - 126px);
border: 1px solid #fff;
border-radius: 6px;
background-color: #fff;
}2.通过代码切换 iframe 中的页面
我们一般情况下，采用 iframe 的 src 属性来控制其中显示的页面，但当 iframe 中的页面跳转到其他页面时，这是我们改变 src 属性的值，iframe 不会将页面切换到要显示的页面，所以可以通过代码来控制 iframe 加载的页面，如针对上面代码中的 iframe 标签，相应的代码为：
document.getElementById('page').contentWindow.location = '/first.html'3.iframe 中页面调用父页面中的方法
在 Vue 中使用 iframe 时，我们要实现 iframe 中的页面调用父页面中的方法，可以使用 postMessage 消息传递的方式来实现，如：
父页面中的代码：
window.addEventListener('message', function(e){
if (e.data.data === 'refresh-avatar') load_my_avatar()
})iframe 中的页面代码：
window.parent.postMessage({
data :"refresh-avatar"
},'*');