vue-fullscreen iframe 标签全屏问题

Vue-FullScreen 是一个 Vue.js 插件，它提供了一种简单的方式来处理浏览器的全屏功能，通常用于响应式设计或者需要全屏展示的内容。然而，当涉及到 `iframe` 标签时，全屏的问题可能会变得复杂，因为`iframe` 的内容并不直接控制其宿主窗口的全屏状态。

默认情况下，`iframe` 内部的内容无法触发其父容器（即浏览器窗口）的全屏模式。为了在 Vue-FullScreen 下让 `iframe` 全屏，你需要采取一些技巧：

1. 使用 postMessage API：通过 JavaScript 的 `postMessage` 和 `message` 监听机制，你可以从父页面向 `iframe` 发送全屏请求，然后在 `iframe` 内部处理并启用全屏。

// 父页面 Vue 组件
this.$refs.iframe.contentWindow.postMessage({ action: 'requestFullscreen', target: document.getElementById('myIframe') }, '*');

// 事件监听
window.addEventListener('message', (event) => {
  if (event.origin !== 'http://your-iframe-domain.com' || event.data.action !== 'enterFullScreen') return;
  // 在这里处理进入全屏的状态
});

// 如果是在 iframe 内部
window.addEventListener('message', (event) => {
  if (event.data.action === 'requestFullscreen') {
    event.source.requestFullscreen();
  }
});

2. 利用 HTML5 的 experimental features（实验特性）：某些现代浏览器支持在 `iframe` 内部设置 `allowfullscreen` 属性，但这不是标准，兼容性可能会有问题。

<iframe :src="src" allowfullscreen></iframe>