Question

我有来自facebook，twitter等的src的iframe（跨域）我需要获得iframe的高度但我遇到了问题：“访问属性'权限'权限被拒绝”。请帮我解决这个问题。非常感谢！

Answer 1

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

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

如果父文档可以自由地与来自不同域的孩子进行通信，则任何 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>

如何获得iframe跨域的高度

2 个答案: