javascript 跨域 iframe 调整大小

Question

我有一个 iframe 拉入图像和一些数据行（跨域）。 iframe 是使用嵌入的 javascript 文件创建的，如下所示：

    <script type="text/javascript" src="http://www.domain.com/blah/scriptfile.js?blah_id=001" id="blah_script"></script>

正在创建 iframe，它正在完美地加载图像和数据......到目前为止，一切都很好。

在 iframe 内，我想隐藏数据行并缩短 iframe [-] 的高度，当单击图像时 [+] 扩展 iframe 的高度并取消隐藏行。我将行放在一个 .

下面是被调用 onclick 的函数的缩减版本（它正在被调用）。函数的第一行显示了我是如何生成 szFrameName 的，$folder_id 是 001，这反映在 szSpanName 中。当 alert() 被调用时，它显示：“blah_iframe_001 blah_cmpnt_001”，所以名称是正确的，但是 document.getElementById 在 blah_iframe 上返回 null，但在 blah_cmpnt_ 上工作正常_

function onclickToggle()
{
  var szFrameName = 'blah_iframe_' +"<?php echo $folder_id; ?>";
  var szSpanName = "blah_cmpnt_" +"001";
  var idFrame = document.getElementById(szFrameName);
  var idCmpnt = document.getElementById(szSpanName);

  alert(szFrameName +" " +szSpanName);
}

我已经尝试过 window.frameElement，但这会产生“拒绝访问”错误，那么如何调整 iframe 的大小/缩短？

Answer 1

希望这对其他人有所帮助，我在 github 上创建了 3 个文件，这些文件准确地展示了如何做到这一点......跨域 iframe 调整大小最好。

https://github.com/ppetree/iframe_resize.git

Answer 2

查看了很多不同的解决方案后，我最终编写了一个简单的库来考虑许多不同的用例。因为我需要一个在门户页面上支持多个用户生成的 iFrame 的解决方案，支持浏览器调整大小并且可以应对 iFrame 之后加载的主机页面 JavaScript。我还添加了对调整宽度和回调函数的支持，并允许覆盖 body.margin，因为您可能希望将此设置为零。

https://github.com/davidjbradshaw/iframe-resizer

iFrame 代码只是一个独立的 JavaScript，因此它是其他人页面上的好客。

脚本随后在主机页面上初始化，并具有以下可用选项。有关这些功能的更多详细信息，请访问 GitHub 页面。

iFrameSizer({
    log: false,
    bodyMargin:null,
    sizeHeight:true,
    sizeWidth:false,
    enablePublicMethods:false,
    interval:33,
    autoResize: true,
    callback:function(messageData){
        $('p#callback').html('<b>Frame ID:</b> ' + messageData.iframe.id + 
                            ' <b>Height:</b> ' + messageData.height + 
                            ' <b>Width:</b> ' + messageData.width +
                            ' <b>Event type:</b> ' + messageData.type);
    }
});

如果您设置了 enablePublicMethods，它可以让您在 iframe 中访问以手动设置 iFrame 大小，甚至从主机页面中删除 iframe。