Vue监听iframe加载失败事件的三种实现方法
作者：muzhili
iframe 是一个 HTML 标签,作用是文档中的文档,或者浮动的框架(frame),iframe 元素会创建包含另外一个文档的内联框架（即行内框架）,本文给大家介绍了Vue监听iframe加载失败事件的几种实现方法,需要的朋友可以参考下
在vue项目中要监听 iframe 加载失败的事件，可以使用以下几种方法：
方法一：使用onerror事件（同源）
给iframe添加一个error事件监听器，当iframe加载失败（网络问题、资源不存在、404错误）时这个事件会被触发。（不适用于跨域请求）
<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>
方法二：使用load事件结合内容检查（同源）
使用load事件，并在事件触发后检查页面内容是否表明了404错误。此方法适用于同源情况下，如果iframe加载的是不同源的页面，由于浏览器安全限制，你将无法访问iframe内部的contentDocument或contentWindow属性。
<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>
方法三：使用XMLHttpRequest或fetch API预检查URL状态（非同源/同源均可）
注释：在将URL设置到iframe之前，你可以使用XMLHttpRequest或fetch API预检查URL是否返回200状态码或其他预期的响应。如果状态码不是预期的，你可以决定不加载该URL到iframe或者显示一个错误消息。
<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>
非同源推荐使用方法三，可以根据实际需求添加缺省提示！
到此这篇关于Vue监听iframe加载失败事件的几种实现方法的文章就介绍到这了,更多相关Vue监听iframe加载失败内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！