<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);
    // 你可以在這里檢查錯誤狀態(tài)碼
    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'; // 假設你的檢查函數(shù)在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) { // 檢查狀態(tài)碼是否表明了錯誤（例如404）
            throw new Error('URL返回了非200狀態(tài)碼');
        }
        return true; // URL有效，可以繼續(xù)加載到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>