0
を取り付けするには、画面の外にリサイズ。私はユーザーがページを切り替えることができる以下のHTMLを持っています。これらのページはiFrameに表示されます。のPhoneGap/AndroidのiFrameのは、私はPhoneGapのを使用してAndroidのためのアプリケーションを作成していた内容
<!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のは、それが画面から外れ自体を強制的にページのコンテンツに合わせてサイズを変更し、新しいページをロードするとき。
私はJavaScriptを使用してロードした後、iFrameの幅をリセットし、iFrameのにスクロール属性を追加し、ピクセルを使用してiFrameの幅を指定して試してみましたが、何も働いていません。