1

我有一个名为“parent.html”的 HTML，它在 IFRAME 中显示“child.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 浏览器屏幕截图所示。它不适用于三星 Galaxy S II 上 Android 的默认浏览器。

浏览器详情

以下是两个浏览器的用户代理字符串，分别为：

  1. Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/536.5 (KHTML, like Gecko) Chrome/19.0.1084.41 Safari/536.5
  2. Mozilla/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">&nbsp;</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>

问题

  1. 这是预期的行为吗？是否有在线文档描述了我可以在 Android 浏览器中操作哪些 DOM 对象以及我不能操作哪些？
  2. 有没有其他方法可以在 Android 中调整 IFRAME 的大小？
4

0 回答 0