js实现iframe内容加载失败自动重新加载功能

最近一个项目上的程序经常出现掉线的情况，经排查是该单位的网络不稳定，存在网络丢包现象。导致有时候程序运行加载页面失败，开机自启动应用时出现请求失败的概率非常大，为了解决这个问题我在网上东找西找也没有找到有效的解决办法，最后问了chatGpt，chatGpt愉快的给我解决了！

核心代码

<script>
var url="http://100.87.230.225/test/test";// 测试网络状态地址  请解决跨域问题
var frmUrl="http://10.87.230.225:5555/app/queue/que-display/showMany?pk=C81E728D9D4C2F636F067F89CC14862C&isUpdate=1";// iframe中加载页面地址如果改地址解决了跨域问题可以和url使用同一个地址
var iframe = document.getElementById('iframeid'); // 获取iframe元素
var isConnected = false;
var intervalId;
function autoReconnect(url) {if (isConnected) return;       // 检查iframe页面是否加载成功try{fetch(url).then(response => response.text()).then(data => {// 如果加载成功，则停止重连 清除定时器clearInterval(intervalId);console.log('Connected');iframe.src=frmUrl;// 重新加载iframeisConnected=true;// 设置连接状态标志}).catch(error => console.log('Failed to connect', error));}catch(ex){console.log("发生了异常："+ex.message)} 
}intervalId = window.setInterval(function(){// 定时执行了了console.log("定时器执行了")console.log(isConnected)if(!isConnected){autoReconnect(url);}
},10000);</script>

一、测试效果

在这里插入图片描述

二、未整改前项目代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0"><title>排队叫号系统</title><style>#iframeid {position: fixed;top: 0;left: 0;width: 100%;height: 100%;border: none;}</style><script>window.onload = function SetCwinHeight(){var iframeid=document.getElementById("iframeid"); //iframe idif (document.getElementById){if (iframeid && !window.opera){if (iframeid.contentDocument && iframeid.contentDocument.body.offsetHeight){iframeid.height = iframeid.contentDocument.body.offsetHeight;}else if(iframeid.Document && iframeid.Document.body.scrollHeight){iframeid.height = iframeid.Document.body.scrollHeight;}}}}</script>
</head>
<body><iframe id="iframeid" name = "iframeid" src="http://10.87.230.225:5555/app/queue/que-display/showMany?pk=C81E728D9D4C2F636F067F89CC14862C&isUpdate=1" frameborder="0"></iframe>
</body>
</html>

三、整改后项目代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0"><title>排队叫号系统</title><style>#iframeid {position: fixed;top: 0;left: 0;width: 100%;height: 100%;border: none;}</style><script>window.onload = function SetCwinHeight(){var iframeid=document.getElementById("iframeid"); //iframe idif (document.getElementById){if (iframeid && !window.opera){if (iframeid.contentDocument && iframeid.contentDocument.body.offsetHeight){iframeid.height = iframeid.contentDocument.body.offsetHeight;}else if(iframeid.Document && iframeid.Document.body.scrollHeight){iframeid.height = iframeid.Document.body.scrollHeight;}}}}</script>
</head>
<body><iframe id="iframeid" name = "iframeid" src="" frameborder="0"></iframe>
</body>
<script>
var url="http://100.87.230.225/test/test";// 测试网络状态地址  请解决跨域问题
var frmUrl="http://10.87.230.225:5555/app/queue/que-display/showMany?pk=C81E728D9D4C2F636F067F89CC14862C&isUpdate=1";// iframe中加载页面地址如果改地址解决了跨域问题可以和url使用同一个地址
var iframe = document.getElementById('iframeid'); // 获取iframe元素
var isConnected = false;
var intervalId;
function autoReconnect(url) {if (isConnected) return;       // 检查iframe页面是否加载成功try{fetch(url).then(response => response.text()).then(data => {// 如果加载成功，则停止重连clearInterval(intervalId);console.log('Connected');iframe.src=frmUrl;isConnected=true;}).catch(error => console.log('Failed to connect', error));}catch(ex){console.log("发生了异常："+ex.message)} 
}intervalId = window.setInterval(function(){// 定时执行了了console.log("定时器执行了")console.log(isConnected)if(!isConnected){autoReconnect(url);}
},10000);</script>
</html>