vue中实现iframe 自适应高度和去除滚动条

在Vue中实现iframe自适应高度和去除滚动条可以通过以下方法：

1. **自适应高度**：
- 监听iframe加载事件，获取其内容高度，然后动态设置iframe的高度。这可以通过原生JavaScript或Vue的方法实现。
- 使用Vue的响应式数据来监听变化，并更新iframe的高度。

示例代码如下：

<template>
  <div>
    <iframe
      ref="iframe"
      :src="iframeSrc"
      @load="iframeLoaded"
      style="width: 100%; height: 100%; border: none;"
    ></iframe>
  </div>
</template>

<script>
export default {
  data() {
    return {
      iframeSrc: 'http://example.com',
      iframeHeight: 0,
    };
  },
  methods: {
    iframeLoaded() {
      const iframe = this.$refs.iframe;
      const newHeight = iframe.contentWindow.document.body.scrollHeight || iframe.contentWindow.document.documentElement.scrollHeight;
      this.iframeHeight = newHeight;
    },
  },
};
</script>

在上面的示例中，我们使用了Vue的ref属性来获取iframe元素，并在iframe加载完成后调用`iframeLoaded`方法来获取内容的实际高度，并更新到`iframeHeight`中，从而实现高度的自适应。

2. **去除滚动条**：
- 通过设置CSS样式`overflow: hidden;`或者`overflow: auto;`（不显示滚动条），可以直接去除iframe内部的滚动条。
- 如果无法直接控制iframe的内容页面样式，可以通过JavaScript来动态修改样式。

示例代码如下：

.iframe-container {
  overflow: hidden; /* 去除滚动条 */
}

将这个类应用到包含iframe的父元素上，即可去除滚动条。