如何获得框架跨域的高度

Question

我有iframe(跨域)与src从Facebook, Twitter等。

我需要得到iframe的高度，但是我得到了错误:

访问属性'document'的权限被拒绝

Answer 1

有几个问题。首先，iframe的高度可能不是您想要的。我的意思是，它是在您控制的页面的HTML代码中显式设置的，并且可以通过任何Javascript方法轻松访问和修改。看起来你要的是页面内部 iframe的高度。如果是这种情况，简单的答案是你不能，至少不能使用外部服务，如Facebook/Twitter。

由于安全原因，可以很容易地将消息从子传递到父，但不能从父传递到子，除非在两个文档中都在javascript 中构建了通信路径。在现代浏览器中有一个postMessage协议来处理这个问题。https://developer.mozilla.org/en/DOM/window.postMessage。但是，在这种情况下，它是完全无用的，除非你正在与之通信的文档被设置为处理传入的postMessage，据我所知，Twitter/Facebook经常不是。

如果父文档可以自由地与来自不同域的子文档通信，那么any javascript就可以在您登录的任何站点上有效地执行任何一系列命令。这对安全的影响是可怕的，谢天谢地，这是不可能的。

Answer 2

javascript中没有选项来查找跨域iframe高度的高度，但您可以在一些服务器端编程的帮助下完成类似的操作。我在这个例子中使用了PHP

<?php
$output = file_get_contents('http://yourdomain.com');
?>
<div id='iframediv'>
    <?php echo $output; ?>
</div>
<iframe style='display:none' id='iframe' src="http://yourdomain.com" width="100%" marginwidth="0" height="100%" marginheight="0" align="top" scrolling="auto" frameborder="0" hspace="0" vspace="0"> </iframe>
<script>
if(window.attachEvent) {
    window.attachEvent('onload', iframeResizer);
} else {
    if(window.onload) {
        var curronload = window.onload;
        var newonload = function(evt) {
            curronload(evt);
            iframeResizer(evt);
        };
        window.onload = newonload;
    } else {
        window.onload = iframeResizer;
    }
}
   function iframeResizer(){
        var result = document.getElementById("iframediv").offsetHeight;
        document.getElementById("iframe").style.height = result;
        document.getElementById("iframediv").style.display = 'none';
        document.getElementById("iframe").style.display = 'inline';
    }
</script>