javascript 如何获取iframe跨域的高度

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/8223239/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-26 02:41:57  来源:igfitidea点击:

How to get height of iframe cross domain

javascriptiframecross-domain

提问by hungpham

I have iframe(cross domain) with src from facebook, twitter or etc. I need to get height of iframe but i got issue: "Permission denied to access property 'document'". Please help me to resolve this. Many thanks!

我有来自 facebook、twitter 等的带有 src 的 iframe(跨域)。我需要获取 iframe 的高度,但我遇到了问题:“权限被拒绝访问属性‘文档’”。请帮我解决这个问题。非常感谢!

回答by Nucleon

Couple issues. First, the height of the iframeis likely not what you want. I mean that's set explicitly in the HTML code of the page you control and is readily accessible and modifiable through any Javascript means. What it appears you are after is the height of the page insidethe iframe. If that's the case, the simple answer is you can't, at least not with external services like Facebook/Twitter.

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

Due to security reasons, one can easily pass messages from child to parent, but not from parent to child, unless a communication pathway has been built into your javascript in both documents. There is a postMessageprotocol for handling this in modern browsers. https://developer.mozilla.org/en/DOM/window.postMessage. But, it's wholly useless in this case unless the document you are communicating with is setup to handle an incoming postMessage, which to my knowledge Twitter/Facebook frequently are not.

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

If a parent document could freely communicate with children from different domains, then anyjavascript could effectively execute any series of commands on any site you're logged in as. The security implications of that are frightening and thankfully not possible.

如果父文档可以与来自不同域的子文档自由通信,那么任何javascript 都可以在您登录的任何站点上有效地执行任何系列的命令。其安全隐患令人恐惧,幸好这是不可能的。

回答by Santhosh Fernando

There is no options in javascript to find the height of a cross domain iframe height but you can done something like this with the help of some server side programming. I used PHP for this example

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>