vue 获取frame 标签里#documents里面的内容
时间: 2024-09-12 15:14:59 浏览: 18
在Vue.js中,如果你想要获取iframe标签中`id="documents"`元素的内容,你可以通过JavaScript操作DOM或者使用Vue的计算属性结合事件监听。这里提供一种常见的方法:
1. **直接操作DOM** (假设`ref`已绑定到iframe)
```html
<iframe ref="iframeDocument" id="documents"></iframe>
<script>
export default {
methods: {
getIFrameContent() {
const iframe = this.$refs.iframeDocument;
if (iframe && iframe.contentWindow) { // 判断iframe是否加载完成
const doc = iframe.contentWindow.document; // 获取iframe内的文档
return doc.body.textContent || doc.documentElement.textContent;
}
},
},
};
</script>
```
2. **使用计算属性 + 生命周期钩子**
```html
<iframe ref="iframeDocument" id="documents"></iframe>
<script>
export default {
data() {
return {
iframeContent: '',
};
},
mounted() {
this.getIFrameContent();
},
computed: {
iframeContent() {
const iframe = this.$refs.iframeDocument;
if (iframe && iframe.contentWindow) {
return iframe.contentWindow.document.body.textContent || iframe.contentWindow.document.documentElement.textContent;
}
return '';
},
},
};
</script>
```
在上述代码中,当组件挂载时(`mounted`生命周期钩子),会尝试获取iframe的内容并更新`iframeContent`属性。然后你可以在模板中直接引用这个属性。