设置IFRAME的style.height属性对Android Mobile Safari没有任何影响

时间：2012-05-14 20:13:25

标签： javascript android html dom

我有一个名为'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

    3. 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的大小吗？

0 个答案:

没有答案
相关问题
最新问题