Question

我在俄罗斯社交网络Odnoklassniki.ru a small 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("XXX " + document.getElementById("fb-root").clientHeight);
        alert("XXX " + document.getElementById("fb-root").offsetHeight);
        FAPI.UI.setWindowSize(720, 1200);
}, function(error){
        alert("API initialization failed");
});
</script> 
</body> 
</html>

即。 iframe-height目前已硬编码为 1200 。

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

如果我不想只为一个 $（＃fb-root）.offset（）包含jQuery，请有人知道，这里可以使用哪个JavaScript或CSS函数致电？

我也查看了他们的库http://api.odnoklassniki.ru//js/fapi.js，但它没有包含这样的功能。

更新

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

更新

以下代码似乎适用于我的Google Chrome和Mozilla Firefox中的iframe应用程序，无论我添加了多少用于测试它。但是使用Internet Explorer无法调整窗口大小并且警报在Google Chrome中显示top = 1107而不是top = 1157，因此底部的html表格被截断：

preferans

... 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

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

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

Answer 2

看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 3

如果document.getElementById("fb-root").clientHeight返回0，则肯定意味着您的“fb-root”div未显示或仍为空。

我看过fapi.js，似乎调用FAPI.init函数会创建一个id为“FAPI_Flash_wrap”的span，将其附加到文档正文，然后嵌入一个id为“flash”的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 是其第一个父盒子，其位置样式是固定的，相对的或绝对的。

纯JavaScript函数类似于jQuery.offset（）？

4 个答案: