JavaScript:查找 iframe body 的维度

我有一个网页，它在iframe中嵌入了另一个页面。我希望外部文档中的JavaScript函数来获取iframe中文档的大小（以像素为单位）。

我一直在探索 DOM 和我能找到的唯一与width相关的属性，height给出 iframe 本身的高度，它比其中的文档小。

例如

<iframe src="tall_page.php" id="my_iframe" style="height: 101px"></iframe>
...
var i = document .getElementById ("my_iframe");
i = i .contentDocument .body;
alert (i .offsetHeight); // or scrollHeight or clientHeight

以上将给出"101"。我追求的值是整个内容文档的大小，而不是框架 - 而不仅仅是<body>：例如，如果CSS给出html{padding:x}，我希望它入。

如何获取此值？

使用 jQuery 这应该可以工作：

var height = $("my_iframe").height();
var width = $("my_iframe").width();

希望有帮助

我让它使用contentWindow对象工作。

我认为这里的想法是获得一个元素，您在 iframe 中设置。在我的示例中，我使用 css 将 iframe 主体设置为 3000px，并让它工作。

请记住，由于您正在访问 iframe 的数据，您需要遵守同源政策

这是我的例子：

内嵌框架.html

<!DOCTYPE html>
<html lang='en'>
    <head>
        <title>My Iframe</title>
    </head>
    <body id='mybody' style='width:3000px;'>
        Hello!
    </body>
</html>

索引.html

<!DOCTYPE html>
<html lang='en'>
    <head>
        <title>My Test</title>
        <script>
            window.onload = function() {
                var f = document.getElementById('myiframe');
                console.dir(f.contentWindow.document.getElementById('mybody').clientWidth);
            }
        </script>
    </head>
    <body>
        <iframe id='myiframe' src='iframe.html' height='480' width='640'>
        </iframe>
    </body>
</html>

希望有帮助。

相关内容

最新更新

热门标签：