Vue监听iframe加载失败事件的三种实现方法

<template>
    <iframe ref="iframeRef" @error="handleError"></iframe>
</template>
<script setup>
import { ref } from 'vue';
const iframeRef = ref(null);
const handleError = (event) => {
    console.log('iframe加载出错', event);
    // 你可以在这里检查错误状态码
    if (event.target.contentWindow.document.readyState === 'complete' && event.target.src !== '') {
        console.log('可能是404错误');
    }
 };
</script>

<template>
    <iframe ref="iframeRef" @load="handleLoad"></iframe>
</template>
<script setup>
import { ref } from 'vue';
const iframeRef = ref(null);
const handleLoad = () => {
    const iframeContent = iframeRef.value.contentDocument || iframeRef.value.contentWindow.document;
    if (iframeContent) {
        const statusText = iframeContent.title || iframeContent.documentElement.textContent;
        if (statusText.includes('404')) {
            console.log('检测到404错误');
        }
    }
};
</script>

<template>
    <iframe ref="iframeRef"></iframe>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import { checkUrl } from './utils'; // 假设你的检查函数在utils.js文件中定义
const iframeRef = ref(null);
const url = 'http://example.com/some-page'; // 你的目标URL
async function checkUrl(url) {
    try {
        const response = await fetch(url);
        if (!response.ok) { // 检查状态码是否表明了错误（例如404）
            throw new Error('URL返回了非200状态码');
        }
        return true; // URL有效，可以继续加载到iframe中
    } catch (error) {
        console.error('URL检查失败:', error);
        return false; // URL无效或无法访问，不加载到iframe中或显示错误信息
    }
}
onMounted(async () => {
    if (await checkUrl(url)) {
        iframeRef.value.src = url; // URL有效，设置iframe的src属性
    } else {
        console.log('无法加载URL，可能是404错误'); // URL无效，处理错误情况，例如显示错误消息等。
    }
});
</script>