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

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);
}

但这由于同源策略而无法正常工作，并且您将得到以下错误：

Error: Permission denied to access property "innerWidth"

检查MDN以获取有关此错误的更多信息 。

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