Vue 中使用 iframe 的 onload 事件的例子 。
时间: 2024-04-20 18:22:34 浏览: 230
vue组件中使用iframe元素的示例代码
5星 · 资源好评率100%
当在Vue中使用iframe时,可以通过监听iframe元素的load事件来触发onload事件。以下是一个示例:
```vue
<template>
<div>
<iframe ref="myFrame" src="https://www.example.com" @load="handleLoad"></iframe>
</div>
</template>
<script>
export default {
methods: {
handleLoad() {
console.log("iframe加载完成");
// 在这里执行加载完成后的操作
}
}
}
</script>
```
在上面的示例中,我们在`<iframe>`标签上添加了`ref`属性,以便在Vue组件中引用它。然后,我们使用`@load`事件监听器来监听iframe的load事件。当iframe加载完毕时,会触发`handleLoad`方法,你可以在这个方法中执行任何你想要的操作。
例如,你可以在`handleLoad`方法中执行一些操作,比如修改iframe的样式、获取iframe的内容等等。
阅读全文