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 的高度并取消隐藏行。 我把行放在.

下面是在单击上调用的函数的缩减版本（并且正在调用它）。函数中的第一行显示了我如何生成 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。