0

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

我一直在探索 DOM 以及我能找到的与 iframe 本身相关的唯一属性，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}了例如，我希望它被引入。

我如何获得这个值？

4

2 回答 2

0

使用 jQuery 这应该可以工作：

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

希望有帮助

于 2012-10-07T16:34:07.537 回答
0

我使用 contentWindow 对象让它工作。

我认为这里的想法是获取您在 iframe 中设置的元素的宽度/高度。在我的示例中，我使用 css 将 iframe 主体设置为 3000px，然后让它工作。

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

这是我的例子：

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>

希望有帮助。

于 2012-10-07T18:00:00.587 回答