javascript - jQuery 报告 Firefox iframe 中的元素高度不正确

标签 javascript jquery css iframe height

这是一个简短的测试来证明我的问题。我有一个加载 iframe 的页面:

<html>
    <head>
        <title></title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
    </head>
    <body>
        <iframe id="iframe" src="box.html" style="width: 100px; height: 100px"></iframe>
        <script>
            $('#iframe').bind('load', function () {
                var div = $(this).contents().find('div');
                alert(div.height());
                alert(div.innerHeight());
                alert(div.outerHeight());
                alert(div.outerHeight(true));
            });
        </script>
    </body>
</html>

iframe (box.html) 包含一个单一样式的 div:

<html>
    <head>
        <title></title>
        <style>
            div {
                height: 50px;
                width: 50px;
                margin: 5px;
                padding: 5px;
                border: 2px solid #00f;
                background-color: #f00;
            }
        </style>
    </head>
    <body>
        <div></div>
    </body>
</html>

这四个警报应分别返回 50、60、64 和 74。这在 Safari 和 Chrome 中按预期工作。在 FF 3.5.1 中,它们都返回 64。这是错误的。

有谁知道如何强制 FF/jQuery 返回正确的值?

最佳答案

试试这个:

var div = $(this).contents().find("html");

关于javascript - jQuery 报告 Firefox iframe 中的元素高度不正确,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1220606/

相关文章:

javascript - 注销后 React Router 4 管理路由

jquery - 删除div后的特定文本

JQuery Mobile 像画廊一样在页面之间滑动

javascript - $(document).ready(function()) 仅在jsp加载后执行

html - 水平分隔线雕刻线

html - CSS按钮-背景

javascript - Sails.js 0.12.1 中的路由

javascript - 构造函数变量的打印名称

javascript - 循环查询JSON数据集获取前端输出

css - 是否有任何特定原因导致filter属性在根元素的background属性中不起作用?