1

我有一个 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 的大小/缩短？

4

2 回答 2

5

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

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

于 2013-10-01T00:38:56.347 回答
1

在查看了很多不同的解决方案后，我最终编写了一个简单的库来考虑许多不同的用例。因为我需要一个在门户页面上支持多个用户生成的 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。

于 2014-01-28T10:42:06.577 回答