html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="shortcut icon" href="/img/favicon.ico" type="image/x-icon" />
<title>轮播</title>
</head>
<body>
<div style="width: 100%;height: 100%" id="content">
</div>
<iframe src="http://10.90.01.11:8888/#/dashboard" style="width: 100%;height: 372px;z-index: -1" id="iframe">
</iframe>
</body>
<script src="/jquery-3.3.1.min.js" ></script>
<script type="text/javascript">
var height = window.innerHeight ;//windows窗口的高度
console.log(height);
$("#iframe").height(height);//iframe和div全部是100%高
$("#content").height(height);
var urls = ['/mes/drcl','/mes/gz','/mes/gxjtkb','3'];//此处的3是个随意值
var i = 0;
go_page(0);
function go_page(){
if(i == 3){
$("#content").hide();
i = 0;
}else{
$("#content").show();
}
$.ajax({
type: 'get',
url: urls[i], //请求后台页面,我后台是spingboot的返回的thymeleaf
data: {},
cache: false,
processData: false,
contentType: false,
success: function (res) {
document.getElementById("content").innerHTML = res;//返回渲染好的页面写入到div里
i ++;
}
})
}
//定时 5秒轮播一次
setInterval(function () {
go_page();
},5000);
</script>
</html>
背景:
1、后台是springboot /springmvc + thymeleaf
2、iframe能够跨域请求
3、动态设置div和iframe的影藏和显示
4、不要请求跨域的url,直接隐藏掉iframe就行