javascript跨域iframe调整大小

时间:2013-09-17 18:03:08

标签: javascript html iframe resize

我有一个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?

2 个答案:

答案 0 :(得分:5)

希望这会帮助其他人,我在github上创建了3个文件,显示了如何做到这一点......跨域iframe调整最好。

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

答案 1 :(得分: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。