内容：

• iframe 全屏显示
• 通过代码切换 iframe 中的页面
• iframe 中页面调用父页面中的方法

iframe 元素会创建包含另外一个文档的内联框架（即行内框架）。 在多页面开发中经常会用到。

1.iframe 全屏显示

如果需要在页面中控制 iframe 的高度和宽度，则必须将所在页面的高度和宽度先调整为 100%；如：

html, body, #app {
    height: 100%;
    width: 100%;
}

100% 也可以写成 100vh、100vw。

然后通过 css 来调整 iframe 的大小，如：

<iframe id="page" name="pageFrame" class="frame"/>

.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"
      },'*');