<template>
    <iframe ref="iframeRef" @error="handleError"></iframe>
</template>
<script setup>
import { ref } from 'vue';
const iframeRef = ref(null);
const handleError = (event) => {
    console.log('iframe加載出錯(cuò)', event);
    // 你可以在這里檢查錯(cuò)誤狀態(tài)碼
    if (event.target.contentWindow.document.readyState === 'complete' && event.target.src !== '') {
        console.log('可能是404錯(cuò)誤');
    }
 };
</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('檢測(cè)到404錯(cuò)誤');
        }
    }
};
</script>

<template>
    <iframe ref="iframeRef"></iframe>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import { checkUrl } from './utils'; // 假設(shè)你的檢查函數(shù)在utils.js文件中定義
const iframeRef = ref(null);
const url = 'http://example.com/some-page'; // 你的目標(biāo)URL
async function checkUrl(url) {
    try {
        const response = await fetch(url);
        if (!response.ok) { // 檢查狀態(tài)碼是否表明了錯(cuò)誤（例如404）
            throw new Error('URL返回了非200狀態(tài)碼');
        }
        return true; // URL有效，可以繼續(xù)加載到iframe中
    } catch (error) {
        console.error('URL檢查失敗:', error);
        return false; // URL無(wú)效或無(wú)法訪問(wèn)，不加載到iframe中或顯示錯(cuò)誤信息
    }
}
onMounted(async () => {
    if (await checkUrl(url)) {
        iframeRef.value.src = url; // URL有效，設(shè)置iframe的src屬性
    } else {
        console.log('無(wú)法加載URL，可能是404錯(cuò)誤'); // URL無(wú)效，處理錯(cuò)誤情況，例如顯示錯(cuò)誤消息等。
    }
});
</script>