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

Question

在俄罗斯社交网络 Ok.ru 的一个小型 iframe-application 中，我使用以下调用来调整 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-height 当前被硬编码为 1200。

它工作正常，但我想改用 #fb-root 元素的高度/位置。

有没有人想知道，这里可以使用哪个 JavaScript 或 CSS 函数 - 如果我不想只为一个 $(#fb-root).offset() 包含 jQuery strong> 打电话？

我还查看了他们的库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 表格被切断：

... 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
    });   
}

Answer 2

Quirksmode 有一个 JavaScript 教程/函数，展示了如何找到元素 here 的坐标

一旦你有了它的坐标，你就可以使用 iframe 的 offsetHeight 属性来读取它的高度。

Answer 3

如果document.getElementById("fb-root").clientHeight 返回 0，那肯定意味着您的“fb-root”div 要么没有显示，要么仍然为空。

我看过 fapi.js，似乎调用 FAPI.init 函数会创建一个 id 为“FAPI_Flash_wrap”的跨度，将其附加到文档的正文中，然后嵌入一个带有 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/", "XXX_YYY",
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>

Answer 4

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

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

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