WebViewiframeを使用して1つのHTMLに複数のHTMLファイルを表示しようとしています
現在のhtmlのiframeの高さを変更するために、htmlファイルで次のスクリプトを使用しています。
<body onload="resizeFrames()" link="#bb7722" vlink="#bb7722" alink="#bb7722" >
<script type="text/javascript">
// Firefox worked fine. Internet Explorer shows scrollbar because of frameborder
function resizeFrames() {
var all_IFrames = document.getElementsByTagName('iframe');
i = 0;
while (frame = all_IFrames.item(i++)) {
resizeFrame(frame);
}
}
function resizeFrame(f) {
f.style.height = f.contentWindow.document.body.scrollHeight + "px";
}
</script>
<iframe width="100%" scrolling="no" frameborder=0 border=0 src="b.html"></iframe>
<iframe width="100%" scrolling="no" frameborder=0 border=0 src="c.html"></iframe>
javascriptを機能させるために、次のコードを使用します。
WebSettings webSettings = wb.getSettings();
webSettings.setJavaScriptEnabled(true);
私は次のようにhtmlファイルをロードします：
webView.loadUrl("file:///android_asset/a.html");
問題は、サイズ変更されたiframeのサイズが大きすぎる場合と小さすぎる場合があることです。
私はそれをアンドロイド2.2のギャラクシーでテストしました、そしてすべてのフレームはより小さく（最後に切り取られました）そしてアンドロイド4.0.4の別のデバイスでは、すべてのフレームはより大きかった（空のスペースを追加しました）
ギャラクシーの問題を取り除くとwebSettings.setJavaScriptEnabled(true);消えますが、2番目のデバイスではフレームのサイズがまったく変更されません
完全なhtmlコード：
<!DOCTYPE html>
<html>
<head>
<style>
body{
color: #aa6611;
font-size:20px;
}
.link {
font-weight: bold;
color: #bb7722;
}
</style>
</head>
<body onload="resizeFrames()" link="#bb7722" vlink="#bb7722" alink="#bb7722" >
<script type="text/javascript">
// Firefox worked fine. Internet Explorer shows scrollbar because of frameborder
function resizeFrames() {
var all_IFrames = document.getElementsByTagName('iframe');
i = 0;
while (frame = all_IFrames.item(i++)) {
resizeFrame(frame);
}
}
function resizeFrame(f) {
f.style.height = f.contentWindow.document.body.scrollHeight + "px";
}
</script>
<a name="top"></a>
<font size = "6" color="#ffaa55">Guide</font>
<br />
<br />
<a href="#mainscreen" class="link" >Main screen</a> <br />
<a href="#inventory" class="link">Inventory</a> <br />
<a href="#store" class="link">Store</a> <br />
<a href="#market" class="link">Market</a> <br />
<a href="#creatureattackdialog" class="link">Creature Attack Dialog</a> <br />
<a href="#userattackdialog" class="link">User Attack Dialog</a> <br />
<a href="#miniattackdialog" class="link">Mini Attack Dialog</a> <br />
<a href="#profile" class="link">Profile</a> <br />
<a href="#creatureinfo" class="link">Creature info</a> <br />
<a href="#userinfo" class="link">User info</a> <br />
<a href="#iteminfo" class="link">Item info</a> <br />
<a href="#lastattackers" class="link">Last Attackers</a> <br />
<a href="#achievementshistory" class="link">Achievements History</a> <br />
<a href="#achievementsDialog" class="link">Achievement info</a> <br />
<a href="#options" class="link">Options</a> <br />
<br />
<p>
<a name="mainscreen"></a>
<iframe width="100%" scrolling="no" frameborder=0 border=0 src="mainscreen.html"></iframe>
</p>
<a href="#top" class="link">Back</a> <br />
<p>
<a name="inventory"></a>
<iframe width="100%" scrolling="no" frameborder=0 border=0 src="inventory.html"></iframe>
</p>
<a href="#top" class="link">Back</a> <br />
<p>
<a name="store"></a>
<iframe width="100%" scrolling="no" frameborder=0 border=0 src="store.html"></iframe>
</p>
<a href="#top" class="link">Back</a> <br />
<p>
<a name="market"></a>
<iframe width="100%" scrolling="no" frameborder=0 border=0 src="market.html"></iframe>
</p>
<a href="#top" class="link">Back</a> <br />
<p>
<a name="creatureattackdialog"></a>
<iframe width="100%" scrolling="no" frameborder=0 border=0 src="attackDialogCreature.html"></iframe>
</p>
<a href="#top" class="link">Back</a> <br />
<p>
<a name="userattackdialog"></a>
<iframe width="100%" scrolling="no" frameborder=0 border=0 src="attackDialogUser.html"></iframe>
</p>
<a href="#top" class="link">Back</a> <br />
<p>
<a name="miniattackdialog"></a>
<iframe width="100%" scrolling="no" frameborder=0 border=0 src="miniattackdialog.html"></iframe>
</p>
<a href="#top" class="link">Back</a> <br />
<p>
<a name="profile"></a>
<iframe width="100%" scrolling="no" frameborder=0 border=0 src="profile.html"></iframe>
</p>
<a href="#top" class="link">Back</a> <br />
<p>
<a name="creatureinfo"></a>
<iframe width="100%" scrolling="no" frameborder=0 border=0 src="creatureInfo.html"></iframe>
</p>
<a href="#top" class="link">Back</a> <br />
<p>
<a name="userinfo"></a>
<iframe width="100%" scrolling="no" frameborder=0 border=0 src="userInfo.html"></iframe>
</p>
<a href="#top" class="link">Back</a> <br />
<p>
<a name="iteminfo"></a>
<iframe width="100%" scrolling="no" frameborder=0 border=0 src="itemInfo.html"></iframe>
</p>
<a href="#top" class="link">Back</a> <br />
<p>
<a name="lastattackers"></a>
<iframe width="100%" scrolling="no" frameborder=0 border=0 src="lastattackers.html"></iframe>
</p>
<a href="#top" class="link">Back</a> <br />
<p>
<a name="achievementshistory"></a>
<iframe width="100%" scrolling="no" frameborder=0 border=0 src="acheivementhistory.html"></iframe>
</p>
<a href="#top" class="link">Back</a> <br />
<p>
<a name="achievementsDialog"></a>
<iframe width="100%" scrolling="no" frameborder=0 border=0 src="acheivementDialog.html"></iframe>
</p>
<a href="#top" class="link">Back</a> <br />
<p>
<a name="options"></a>
<iframe width="100%" scrolling="no" frameborder=0 border=0 src="optionsDialog.html"></iframe>
</p>
<a href="#top" class="link">Back</a> <br />
</body>
</html>