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（）被调用时，它显示：＆＃34; blah_iframe_001 blah_cmpnt_001＆＃34;所以名称是正确的但是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，但会产生＆＃34;访问被拒绝＆＃34;错误，那么如何调整/缩短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。

javascript跨域iframe调整大小

2 个答案: