当前位置：文江博客话题详情

如何获取iframe跨域的高度

发布于 2024-12-17 04:25:00 字数 128 浏览 0 评论 0原文

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

我需要获取 iframe 的高度，但出现错误：

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

情未る 2024-12-24 04:25:01

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>

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

<?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>

回复收藏 0 原文

千纸鹤 2024-12-24 04:25:00

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

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

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