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

最新推荐文章于 2024-05-16 14:34:43 发布

我是罗易呀！

最新推荐文章于 2024-05-16 14:34:43 发布

阅读量809

点赞数 8

分类专栏：前端技术文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/Qcg0223/article/details/135648237

版权

前端技术专栏收录该内容

14 篇文章 0 订阅

订阅专栏

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

一、测试效果

在这里插入图片描述

二、未整改前项目代码

<!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 id
  if (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 id
  if (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>