Javascript 如何获取iframe跨域的高度

我有来自Facebook、Twitter等的iframe（跨域）和src

我需要获取iframe的高度，但我得到了错误：

访问属性“文档”的权限被拒绝

---

两个问题。首先，

iframe

的高度可能不是您想要的。我的意思是，这是在您控制的页面的HTML代码中明确设置的，并且可以通过任何Javascript方式轻松访问和修改。您所追求的是iframe中页面的高度。如果是这样，简单的答案是你不能，至少在Facebook/Twitter这样的外部服务中不能

由于安全原因，您可以轻松地将消息从子级传递到父级，但不能从父级传递到子级，除非在两个文档中的javascript中都内置了通信路径。现代浏览器中有一个

postMessage

协议来处理此问题。但是，在这种情况下，它是完全无用的，除非您正在与之通信的文档被设置为处理传入的postMessage，据我所知，Twitter/Facebook通常不是这样

---

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

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>

如果（窗口附件）{
window.attachEvent（'onload'，iframeResizer）；
}否则{
if（窗口加载）{
var curronload=window.onload；
var newonload=函数（evt）{
电流负载（evt）；
iframeResizer（evt）；
};
window.onload=newonload；
}否则{
window.onload=iframeResizer；
}
}
函数iframeResizer（）{
var result=document.getElementById（“iframediv”）.offsetHeight；
document.getElementById（“iframe”）.style.height=结果；
document.getElementById（“iframediv”）.style.display='none'；
document.getElementById（“iframe”）.style.display='inline'；
}

问题在于，iframe网页的css文件正在改变您的实际css，因为它将所有链接的文件都放在标题中，也可能将div放在html文档的旁边