纯JavaScript函数类似于jQuery.offset？

如何解决纯JavaScript函数类似于jQuery.offset？

| 在俄罗斯社交网络Ok.ru的一个小型iframe应用程序中，我使用以下调用来调整iframe的大小：

<div id=\"fb-root\"></div> 
<script src=\"http://api.odnoklassniki.ru/js/fapi.js\" 
type=\"text/javascript\"></script> 
<script type=\"text/javascript\"> 
FAPI.init(\"http://api.odnoklassniki.ru/\",\"XXX_YYY\",function() {
        alert(\"clientHeight \" + document.getElementById(\"fb-root\").clientHeight);
        alert(\"offsetHeight \" + document.getElementById(\"fb-root\").offsetHeight);
        FAPI.UI.setWindowSize(720,1200);
},function(error){
        alert(\"API initialization failed\");
});
</script> 
</body> 
</html>

即iframe高度当前已硬编码为1200。 可以，但是我想改用＃fb-root元素的高度/位置。 是否有人知道在这里可以使用哪个JavaScript或CSS函数-如果我不想只为一个$（＃fb-root）.offset（）调用添加jQuery？ 我还查看了他们的库http://api.odnoklassniki.ru//js/fapi.js，但其中不包含此类功能。 更新 我在上面的源代码中添加了两个警报调用，但它们仅打印

clientHeight 0
offsetHeight 0

更新 不管我添加多少个代码来进行测试，以下代码似乎现在都可以在Google Chrome和Mozilla Firefox中对我的iframe-app很好地运行。但是，使用Internet Explorer时，无法调整窗口大小，并且警报在Google Chrome中显示top = 1107而不是top = 1157，因此底部的html表被切除：

... here my flash game + html table with players ...
<br>
<br>
<br>
<br>
<br>
<br>
<div id=\"fb-root\"></div>
<script src=\"http://api.odnoklassniki.ru/js/fapi.js\" type=\"text/javascript\"></script>
<script type=\"text/javascript\">
FAPI.init(\"http://api.odnoklassniki.ru/\",function() {
        var top = findTop(document.getElementById(\"fb-root\"));
        FAPI.UI.setWindowSize(720,Math.max(top,1200));
},function(error){
        alert(\"API initialization failed\");
});
function findTop(obj) {
        if(!obj) return 0;
        return obj.offsetTop + findTop(obj.offsetParent);
}
</script>

</body>
</html>

    

解决方法

Quirksmode具有一个JavaScript教程/函数，该教程/函数显示如何在此处查找元素的坐标 获得坐标后，就可以使用iframe的offsetHeight属性读取其高度。     ,如果

document.getElementById(\"fb-root\").clientHeight

返回0，则肯定意味着您的\“ fb-root \” div不显示或仍然为空。 我看过fapi.js，看来调用FAPI.init函数会创建一个id为\“ FAPI_Flash_wrap \”的span，将其附加到文档正文中，然后嵌入一个id为\“的Flash对象FAPI_Flash \”。 因此，我将尝试检索ID为\“ FAPI_Flash_wrap \”或\“ FAPI_Flash \”而不是\“ fb-root \”的元素：

<script type=\"text/javascript\">
FAPI.init(\"http://api.odnoklassniki.ru/\",\"XXX_YYY\",function() {
    alert(\"Height = \" + document.getElementById(\"FAPI_Flash_wrap\").offsetHeight);
    alert(\"Width = \" + document.getElementById(\"FAPI_Flash_wrap\").offsetWidth);
    FAPI.UI.setWindowSize(720,1200);
},function(error){alert(\"API initialization failed\");}
);
</script>

我希望这行得通！ 如果是这样，那就用

<script type=\"text/javascript\">
FAPI.init(\"http://api.odnoklassniki.ru/\",function() {
    var height = document.getElementById(\"FAPI_Flash_wrap\").offsetHeight;
    var width = document.getElementById(\"FAPI_Flash_wrap\").offsetWidth;
    FAPI.UI.setWindowSize(width,height);
},function(error){alert(\"API initialization failed\");}
);
</script>

    ,使用offsetHeight或clientHeight获取div的高度：

document.getElementById(\"fb-root\").offsetHeight // including border
document.getElementById(\"fb-root\").clientHeight // excluding border 

使用offsetLeft和offsetTop获取div相对于其offsetParent的位置。 offsetParent是它的第一个父框，其位置样式是固定的，相对的或绝对的。