javascript跨域iframe调整大小

我有一个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);
}

函数onclickToggle（）
{
var szFrameName='blah_iframe_'+''；
var szSpanName=“blah_cmpnt”+“001”；
var idFrame=document.getElementById（szFrameName）；
var idCmpnt=document.getElementById（szSpanName）；
警报（szFrameName+“”+szSpanName）；
}

---

我尝试了window.frameElement，但这会产生一个“拒绝访问”错误，因此如何调整/缩短iframe？

为了帮助其他人，我在github上创建了3个文件，精确显示了如何进行此操作。。。跨域iframe以最佳状态调整大小

---

为了帮助其他人，我在github上创建了3个文件，精确地展示了如何做到这一点。。。跨域iframe以最佳状态调整大小

---

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

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);
    }
});

iFrameSizer({
日志：错误，
bodyMargin:null，
sizeHeight:没错，
尺寸：错，
enablePublicMethods:false，
间隔时间：33，
自动调整大小：正确，
回调：函数（messageData）{
$（'p#callback'）.html（'Frame ID:'+messageData.iframe.ID+
'高度：'+messageData.Height+
“宽度：”+messageData.Width+
“事件类型：”+messageData.type）；
}
});

---

如果您设置enablePublicMethods，它将允许您在iframe中手动设置iframe大小，甚至从主机页删除iframe。

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

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);
    }
});

iFrameSizer({
日志：错误，
bodyMargin:null，
sizeHeight:没错，
尺寸：错，
enablePublicMethods:false，
间隔时间：33，
自动调整大小：正确，
回调：函数（messageData）{
$（'p#callback'）.html（'Frame ID:'+messageData.iframe.ID+
'高度：'+messageData.Height+
“宽度：”+messageData.Width+
“事件类型：”+messageData.type）；
}
});

---

如果设置enablePublicMethods，您可以在iframe中手动设置iframe大小，甚至从主机页删除iframe。

由于跨域安全限制，通常不允许您从外部操作跨域iframe的内容。你控制这两个域吗？如果不是的话，你可能是运气不好。我控制创建iframe的js的源代码，我控制iframe窗口的内容，但是这些内容可以出现在任何域上（比如创建谷歌广告的js）。我在玩window.postmessage，但我哪儿也去不了……嗯。在这种情况下，可能会有一个解决方法，但我不知道如何做。由于跨域安全限制，通常不允许您从外部操纵跨域iframe的内容。你控制这两个域吗？如果不是的话，你可能是运气不好。我控制创建iframe的js的源代码，我控制iframe窗口的内容，但是这些内容可以出现在任何域上（比如创建谷歌广告的js）。我在玩window.postmessage，但我哪儿也去不了……嗯。在这种情况下，可能会有一个解决办法，但我不知道如何做。我喜欢你的，但我需要一些独立于jQuery的东西，因为，信不信由你，不是每个网站都使用jQuery。非jQuery版本即将推出。使用新的非jQuery版本更新了答案。我喜欢你的，但我需要一些独立于jQuery的东西，因为，信不信由你，不是每个网站都使用jQuery。非jQuery版本即将发布。更新了新的非jQuery版本的答案。这看起来真的很棒！