Question

我正在使用PhoneGap创建Android应用。我有以下HTML，允许用户在页面之间切换，这些页面显示在iFrame中。

<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css" />
<link rel="stylesheet" type="text/css" href="fonts/copystruct/stylesheet.css" />
<link rel="stylesheet" type="text/css" href="jquery.mobile-1.0.1.min.css" />

<title>***</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="jquery.mobile-1.0.1.min.js"></script>
<script type="text/javascript" src="phonegap-1.3.0.js"></script>
<script>

// Wait for PhoneGap to load
//
document.addEventListener("deviceready", onDeviceReady, false);

// PhoneGap is ready
//

function onDeviceReady() {
//$(document).ready(function(){
$(".welcome_thumbs div").each(function(){
var img = $(this).attr("img");
$(this).css("background-image","url('"+img+"')");
$(this).click(function(){
navigator.notification.vibrate(50);
if( $(this).hasClass("large") ) {
$(".welcome_thumbs").addClass("small").removeClass("large");
$(".welcome_thumbs div").addClass("small").removeClass("large");
}
$(".loader").show();
$("#frame").css('visibility','hidden');
var url = $(this).attr("link");
$("#frame").attr("src",url);
$("#frame").load(function(){
$("#frame").css('visibility','visible');
$(".info").html("iframe: "+$("#frame").width());
$(".loader").hide();
});
});

});

var networkState = navigator.network.connection.type;
var states = {};

states[Connection.UNKNOWN] = 'Unknown connection';
states[Connection.ETHERNET] = 'Ethernet connection';
states[Connection.WIFI] = 'WiFi connection';
states[Connection.CELL_2G] = 'Cell 2G connection';
states[Connection.CELL_3G] = 'Cell 3G connection';
states[Connection.CELL_4G] = 'Cell 4G connection';
states[Connection.NONE] = 'No network connection';

if((states[networkState] == 'No network connection') || (states[networkState] == 'Unknown connection')){
navigator.network.alert("Your phone's web connection is not working. Please check and relaunch app.");
}else{  

$.ajax({
type: "GET",
data: "{}",
url: "http://www.google.com",
cache: false,
timeout: 10 * 1000,
success:function(response){
//success
},
error:function(xhr, textStatus, errorThrown) {
navigator.network.alert("Your web connection is running slow. Please retry.");
}
});
}

}//);

</script>
</head>
<body>
<div class="info"></div>
<section class="welcome_thumbs large">
<div class="large" link="http://sociallearningspace.abertay.ac.uk/mobile.html" img="images/home_page.png"></div>
<div class="large" link="http://sociallearningspace.abertay.ac.uk/facebook_tabs/academic_calendar.html" img="images/academic_calendar.png"></div>
<div class="large" link="http://sociallearningspace.abertay.ac.uk/board/index.php/b/123" img="images/sls_board.png"></div>
<div class="large" link="http://sociallearningspace.abertay.ac.uk/graduateattributes/index.cfm" img="images/ga_wizard.png"></div>
</section>
<div class="loader"></div>
<iframe id="frame" src="" scrolling="yes"></iframe>
</body>
</html>

然而，当iFrame加载新页面时，它会调整大小以适应页面内容，迫使自己离开屏幕。

我尝试使用像素指定iFrame宽度，将滚动属性添加到iFrame，使用JavaScript加载后重置iFrame宽度但没有任何效果。

Answer 1

您是否尝试使用百分比指定iframe的宽度和高度？

<iframe id="frame" src="" scrolling="yes" width="100%" height="100%"></iframe>

PhoneGap / Android iFrame调整屏幕大小以重新调整内容

1 个答案: