vue iframe自适应高度跨域问题

Vue中使用iframe实现内容嵌套时，有时会遇到跨域和自适应高度的问题。这是因为浏览器出于安全原因，不允许从一个源（域名）加载另一个源的内容，除非服务器提供了适当的CORS（跨源资源共享）策略。对于跨域问题，你需要在服务器端设置允许跨域请求，或者在前端使用JSONP或者代理服务器来间接访问。

至于iframe的高度自适应，Vue本身并不能直接处理iframe的高度变化，因为它是在DOM渲染后处理数据的。但你可以通过以下方法解决：

1. 利用JavaScript事件监听：给iframe添加`load`或`message`事件，在事件触发时获取iframe的实际高度并更新其CSS样式。

new Vue({
  el: '#myIframe',
  methods: {
    updateIframeHeight() {
      this.$refs.myIframe.addEventListener('load', () => {
        this.$refs.myIframe.style.height = `${this.myIframeContentHeight}px`;
      });
    }
  },
  mounted() {
    this.updateIframeHeight();
  }
})

2. 使用Intersection Observer API：这是一个现代浏览器提供的API，可以检测元素是否进入或离开视口，适用于动态内容。你可以创建一个观察者，当iframe进入视口时计算其高度。

const observer = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      this.myIframeContentHeight = entry.target.contentDocument.body.scrollHeight;
    }
  });
});
observer.observe(this.$refs.myIframe);

3. 使用第三方库如`vue-observe-visibility-events`：这个库可以帮助你在元素可见时执行回调，可以配合上述方法使用。