自己的vue被嵌套在iframe里怎么获取自己的body

当你将Vue应用嵌套在一个`<iframe>`标签中时，由于浏览器的安全策略（同源策略），Vue直接操作`window.document.body`可能会受限。 Vue实例默认不会访问到`iframe`的DOM，因为它们属于不同的沙箱环境。

不过，你可以通过以下几种方式来间接获取`iframe`内的`body`：

1. **使用事件通信**：利用`Vue`的自定义事件机制，在`parent`页面触发一个事件，`child`页面的Vue组件接收到这个事件后再返回`document.body`。

// parent.vue (外层应用)
new Vue({
  methods: {
    getIFrameBody() {
      const iframe = document.querySelector('iframe');
      iframe.contentWindow.postMessage({ type: 'get-body' }, '*');
    }
  },
});

// child.vue (内嵌应用)
mounted() {
  window.addEventListener('message', event => {
    if (event.data.type === 'get-body') {
      this.$emit('on-body-received', document.body);
    }
  });
}

2. **使用postMessage API**：直接通过`window.postMessage`和`window.addEventListener('message')`进行跨域通信，接收`body`数据。

3. **使用MutationObserver**：如果你有对`iframe`内容区域的引用，可以使用`MutationObserver`来观察其内容变化，当`body`添加或修改时得到它。

4. **利用第三方库**：如果允许的话，可以考虑使用像`vue-communicator`这样的库，它提供了一种更简洁的方式来在Vue组件之间传递消息。

记住，在实际项目中，嵌套`iframe`可能会遇到一些性能和安全问题，因此需要谨慎处理。