Vue中调用iframe里的方法
时间: 2023-08-13 21:09:51 浏览: 100
vue基于iframe优雅实现全新的微前端方案,继承iframe的优点,补足 iframe 的缺点,让 iframe 焕发新生
要在 Vue 中调用 iframe 中的方法,你需要获取到 iframe 的 DOM 对象,然后通过 `contentWindow` 属性访问 iframe 内部的 window 对象,最后通过 window 对象访问相应的方法。
以下是一个示例代码:
```html
<template>
<div>
<iframe ref="myFrame" src="./my-iframe.html"></iframe>
<button @click="callIframeMethod">调用 iframe 方法</button>
</div>
</template>
<script>
export default {
methods: {
callIframeMethod() {
const iframe = this.$refs.myFrame;
const iframeWindow = iframe.contentWindow;
iframeWindow.myMethod();
},
},
};
</script>
```
在上述代码中,我们首先通过 `ref` 属性将 iframe 组件引用为 `myFrame`,然后在 `callIframeMethod` 方法中获取到 iframe 对象和内部的 window 对象,最后通过 `iframeWindow.myMethod()` 调用了 iframe 中的 `myMethod` 方法。
阅读全文