我想使用jQuery重新加载一个框架(而不是iframe),但我没有成功。我有以下代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<frameset cols="*,360" frameborder="0" border="0" framespacing="2">
<frame src="index-coding.html" class="reload" name="desktop" noresize>
<frame src="index-coding.html" class="reload" name="mobile" noresize>
</frameset>
<script>
$(document).ready(function(){
function setupRefresh() { setTimeout("refreshPage();", 5000); }
function refreshPage() { $('.reload' ).attr( 'src', function ( i, val ) { return val; }); }
});
</script>
</html>
是否有理由它可以用于iframe,但不适用于帧?
编辑:我重新调整了html,所以它使用iframe而不是帧 - 仍然有同样的问题。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<iframe src="index-coding.html" frameborder="0" class="reload" style="position: absolute; left: 0; top: 0; width: calc(100% - 360px); height: 100%; "></iframe>
<iframe src="index-coding.html" frameborder="0" class="reload" style="position: absolute; right: 0; top: 0; width: 360px; height: 100%;"></iframe>
<script>
$(document).ready(function(){
function setupRefresh() { setTimeout("refreshPage();", 5000); }
function refreshPage() { $('.reload' ).attr( 'src', function ( i, val ) { return val; }); }
});
</script>
</html>
我使用此代码修复了它:
$(window).on("blur focus", function(e) {
var prevType = $(this).data("prevType");
if (prevType != e.type) { // reduce double fire issues
switch (e.type) {
case "blur":
// refreshiframe();
break;
case "focus":
refreshiframe();
break;
}
}
$(this).data("prevType", e.type);
})
function refreshiframe() {
$('.reload').attr('src', $('.reload').attr('src'));
}