javascript - 类似于 jQuery.offset() 的纯 JavaScript 函数？

Question

在小iframe-application在俄罗斯社交网络 Ok.ru 中，我使用以下调用来调整 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 函数 - 如果我不想包含 jQuery只为一个 $(#fb-root).offset() 调用？

我也看过他们的图书馆http://api.odnoklassniki.ru//js/fapi.js但它不包括这样的功能。

更新

我在上面的源代码中添加了两个警报调用，但它们只打印

clientHeight 0
offsetHeight 0

更新

以下代码似乎适用于我现在在 Google Chrome 和 Mozilla Firefox 中的 iframe-app，无论我为测试它添加了多少
。但是在 Internet Explorer 中它无法调整窗口大小并且警告显示 top=1107 而不是 Google Chrome 中的 top=1157，因此底部的 html 表被 chop :

... 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/", "XXX_YYY",
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>

Answer 1

查看 code in jquery ，偏移量是这样计算的:

function getOffset(element)
{
    if (!element.getClientRects().length)
    {
      return { top: 0, left: 0 };
    }

    let rect = element.getBoundingClientRect();
    let win = element.ownerDocument.defaultView;
    return (
    {
      top: rect.top + win.pageYOffset,
      left: rect.left + win.pageXOffset
    });   
}