Vue 3 监听 iframe 加载完成 - 完整指南

在Vue 3中，你可以使用v-if指令来条件性地渲染iframe，并使用@load事件监听iframe的加载完成。\n\n首先，在Vue模板中，使用v-if指令来根据条件渲染iframe：\n\nhtml\n<template>\n <div>\n <button @click="loadIframe">Load Iframe</button>\n <iframe v-if="showIframe" :src="iframeSrc" @load="iframeLoaded"></iframe>\n </div>\n</template>\n\n\n然后，在Vue组件中，定义相关的数据和方法：\n\njavascript\n<script>\nexport default {\n data() {\n return {\n showIframe: false,\n iframeSrc: ''\n };\n },\n methods: {\n loadIframe() {\n this.showIframe = true;\n this.iframeSrc = 'https://example.com'; // 替换为实际的iframe链接\n },\n iframeLoaded() {\n console.log('Iframe loaded');\n // 在这里可以执行一些加载完成后的操作\n }\n }\n};\n</script>\n\n\n上述代码中，loadIframe方法用于设置showIframe为true，从而渲染iframe，并将iframeSrc设置为实际的iframe链接。当iframe加载完成时，iframeLoaded方法会被调用，你可以在此方法中执行一些加载完成后的操作。\n\n这样，当你点击"Load Iframe"按钮时，会渲染并加载iframe，当iframe加载完成时，会在控制台输出"Iframe loaded"。