IFRAME に「child.html」を表示する「parent.html」という HTML があります。次の方法で IFRAME の高さを調整しようとしています。
f = document.getElementById('frame');
log('B: Frame height: ' + f.style.height);
log('B: Child offsetHeight: ' + f.contentWindow.document.body.offsetHeight);
log('B: Child scrollHeight: ' + f.contentWindow.document.body.scrollHeight);
f.style.height = f.contentWindow.document.body.offsetHeight + 'px';
log('A: Frame height: ' + f.style.height);
左側に表示されている Google Chrome ブラウザのスクリーンショットに見られるように、デスクトップ ブラウザで動作します。Samsung Galaxy S II の Android のデフォルト ブラウザでは動作しません。
ブラウザの詳細
それぞれ、両方のブラウザーのユーザー エージェント文字列は次のとおりです。
Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/536.5 (KHTML, like Gecko) Chrome/19.0.1084.41 Safari/536.5Mozilla/5.0 (Linux; U; Android 2.3.4; en-gb; GT-I9100G Build/GINGERBREAD) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1
HTML
「parent.html」の完全なコードは次のとおりです。
<!DOCTYPE HTML>
<html>
<head>
<title>Parent</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<style type="text/css">
div#log {
background: #333333;
color: white;
padding: 10px;
}
iframe#frame {
height: 200px;
}
</style>
<script type="text/javascript">
var logDiv;
var f;
window.onload = function() {
logDiv = document.getElementById('log');
logDiv.innerHTML = 'Logger ready<br>';
f = document.getElementById('frame');
log('B: Frame height: ' + f.style.height);
log('B: Child offsetHeight: ' + f.contentWindow.document.body.offsetHeight);
log('B: Child scrollHeight: ' + f.contentWindow.document.body.scrollHeight);
f.style.height = f.contentWindow.document.body.offsetHeight + 'px';
log('A: Frame height: ' + f.style.height);
}
function log(msg)
{
logDiv.innerHTML += msg + '<br>';
}
</script>
</head>
<body>
<iframe id="frame" src="child.html">IFRAME not supported</iframe>
<div id="log"> </div>
</body>
</html>
「child.html」の完全なコードは次のとおりです。
<!DOCTYPE HTML>
<html>
<head>
<title>Child</title>
</head>
<style type="text/css">
body, p {
margin: 0;
padding: 0;
}
</style>
<body>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer
fermentum, nunc eget bibendum imperdiet, est odio sagittis lectus,
volutpat viverra odio eros vel quam.
</div>
</body>
</html>
質問
- これは予想される動作ですか？Android のブラウザで操作できる DOM オブジェクトと操作できない DOM オブジェクトを説明したドキュメントをオンラインで入手できますか?
- Android で IFRAME のサイズを変更する他の方法はありますか?