Question

我试图获得整个屏幕高度，直到滚动发生（内容的总高度），这是我尝试的代码，但我得到的值为0，例如我的猜测是整个屏幕高度将超过1400px 如何获得准确的高度

 <div id="sample">
     <iframe src="https://en.wikipedia.org/wiki/Main_Page" style="overflow:hidden;overflow-x:hidden;overflow-y:hidden;height:100%;width:100%;position:absolute;top:0x;left:0px;right:0px;bottom:0px" height="100%" width="100%" allowfullscreen id="frame" onload="myFunction()">
     </iframe>
     <div style="display:block; clear:both;"></div>
 </div>


    <script>
    function myFunction() {
        var elmnt = document.getElementById("sample");
        var y = elmnt.scrollHeight;
        var x = elmnt.scrollWidth;
        var sample = "Height: " + y + "px<br>Width: " + x + "px";
        alert(sample);
    }
    </script>

Answer 1

您获得height = 0因为iframe内容的高度与父div元素无关，而与iframe的文档对象无关，因此您必须访问文档对象：

function myFunction() {
        var elmnt = document.getElementById("frame");
        var win = elmnt.contentWindow;
        var x = win.innerWidth;
        var y = win.innerHeight;
        var iframe = "Height: " + y + "px<br>Width: " + x + "px";
        alert(iframe);
}

但由于same-origin policy，这不起作用，您将收到以下错误：

Error: Permission denied to access property "innerWidth"

检查MDN以获取更多info on this error。

要访问DOM，您必须使用像phantomjs这样的无头浏览器（基于Node.js）解析页面，这必须在服务器端完成，这是一种完全不同的方法，超出了这个问题的范围，但如果您想尝试，可以找到很多examples。

如何从iframe或外部div获取滚动高度

1 个答案: