Question

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

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

e.g。

<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}，我希望它是无效的。

我如何获得此值？

Answer 1

使用jQuery这应该有效：

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

希望有所帮助

Answer 2

我使用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>

<强>的index.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>

希望有所帮助。

JavaScript：查找iframe正文的尺寸

2 个答案: