Question

在我的网络项目中，我有一个iframe。它包含一个图形和一个包含图形值的表格。（graph = google graph api，table = datatables）

有时iframe内容的高度会因其js应用程序而改变，而不是通过重新加载html。

所以我需要检测源自js的变化并增加i帧大小。

如何检测这些变化？

这是我增加i-frame尺寸的功能。（供您参考）

  function update_height() {        
            $('#iframe-1').load( function() {
            var $ifbody = $(this).contents().find( 'body' );
            $ifbody.css( 'height','auto' );
            $(this).height( $ifbody.height() );
    }); 
   };

Answer 1

由于您不想使用轮询，也许您应该考虑从iframe js中触发自定义事件。假设您还在iframe js中使用jquery，则可以在iframe内容发生更改时添加此内容：

parent.$('#iframe-1').trigger("iframeResize", [$("body").height()]);

然后，在父页面中，设置触发事件的处理程序：

$('#iframe-1').bind('iframeResize', function(event, newSize) {
    $(this).height(newSize);
    //or whatever else you'd like to do, such as call your update_height() function
});

如果您不想在事件中发送newSize参数（或者您在触发事件时iframe js不知道它），那么您可以添加update_height()代码进入bind()处理程序以获取iframe正文的大小。

Answer 2

iframe所在的页面，而作为iframe的src提供的页面必须来自同一个来源（相同的原始政策）。如果是这种情况，javascript可以从一个页面到另一个页面（postMessage或通过HashChange）或直接访问Windows父窗口并调整iframe大小。

从iframe中访问主文档上的iframe;

function updateHeight(newHeight){
    parent.document.getElementById("iframe").style.height=newHeight+"px";
}

Answer 3

看来你正在使用jQuery：

$('#iframe-1').load(function(){ 
    $(this).height($(this).contents().find('body').height()); 
});

只要iframe域和协议匹配，对于初始加载，这应该可以做到。

然后在高度变化时保持更新......

$('#iframe-1').contents().find('body').bind('resize', function(){
    $('#iframe-1').height($(this).height());
});

应该这样做......可能......

检测iframe高度更改而不重新加载iframe

3 个答案: