jquery與否跨瀏覽器兼容iframe調整大小（IE，Chrome，Safari，Firefox）

這是我的問題。我一直在尋找一個跨瀏覽器iframe調整大小的代碼來使用，我只是找不到一個。我所見過的所有瀏覽器都有問題。這是我正在做的。我正在加載一個iframe到jquery工具疊加頁面中。這iframe將加載頁面的內容（在同一個域名，所以不需要擔心跨域）。當用戶點擊該表單上的一個動作時，iframe將再次需要調整大小（當iframe增加時，我可以使用它，但iframe減少時不會）。jquery與否跨瀏覽器兼容iframe調整大小（IE，Chrome，Safari，Firefox）

我有一個是包含在具有這種功能

$(window).load(function(){ 
    parent.adjust_iframe(); 
});

該函數然後調用iframe父頁面的功能，像這樣一個js文件：

function adjust_iframe() { 

    //i have tried both body and html and both dont work in IE 
    var h = $("#overlayFrame").contents().find("body").height(); 
    if(h==0) 
    h="500"; 
    else 
    h=h+3; 

    $("#overlayFrame").css({'height': h}); 
    window.scrollTo(0,0); 

}

上面的代碼工作正常Chrome和Firefox，但不在IE中。

這裏有什麼幫助嗎？我真的需要一個跨瀏覽器兼容的輕量級解決方案，不涉及一些不支持的重型jquery插件。

謝謝！

來源

2012-03-26 Scoota P

嘗試

$(window).load(function(){ 
    var bodyHeight = $('body').height(); 
    parent.adjust_iframe(bodyHeight); 
});

和

function adjust_iframe(newHeight) { 

    //i have tried both body and html and both dont work in IE 
    if(newHeight == 0) { 
     newHeight = 500; 
    } else { 
     newHeight += 3; 
    } 

    $("#overlayFrame").css({'height': newHeight}); 
    window.scrollTo(0,0); 
}

因爲這個問題可能是該頁面無法訪問的I幀內容..

來源

2012-03-26 19:24:54

我有兩個建議：

當你正在設置CSS高度，明確告訴它的像素。

$("#overlayFrame").css({'height': h + 'px'});

當你的iframe代碼調用parent.adjust_iframe時，發送當前寬度/高度。

parent.adjust_iframe($('body').height());

獎勵建議：做一點調查，並告訴我們什麼版本的IE以及爲什麼它不起作用。在那裏放置一些警報，並確定高度是否得到派生等。

來源

2012-03-26 19:25:59

我做了警報，並在IE8我得到一個警告說，高度是150.這是調整前的iframe的原始大小 – 2012-03-26 22:28:11

-1

我搜索了我的存檔文件並找到了設置iframe窗口的新大小的腳本。它正在使用IE6，FF，...

/** 
* Parent 
*/ 
<iframe id="myframe" name="myframe" ...> 

<script type="text/javascript"> 
var iframeids=["myframe"]; 
if (window.addEventListener) { 
    window.addEventListener("load", resizeCaller, false); 
}else if (window.attachEvent) { 
    window.attachEvent("onload", resizeCaller); 
} else { 
    window.onload=resizeCaller; 
} 
var iframehide="yes"; 
var getFFVersion=navigator.userAgent.substring(navigator.userAgent.indexOf("Firefox")).split("/")[1]; 
var FFextraHeight=parseFloat(getFFVersion)>=0.1? 20 : 0; 
function resizeCaller() { 
    var dyniframe=new Array(); 
    for (i=0; i<iframeids.length; i++){ 
    if (document.getElementById) 
     resizeIframe(iframeids[i]); 
    if ((document.all || document.getElementById) && iframehide=="no"){ 
     var tempobj=document.all? document.all[iframeids[i]] : document.getElementById(iframeids[i]); 
     tempobj.style.display=""; 
    } 
    } 
}; 

function resizeIframe(frameid){ 
    var currentfr=document.getElementById(frameid); 
    if (currentfr && !window.opera){ 
    currentfr.style.display=""; 
    if (currentfr.contentDocument && currentfr.contentDocument.body.offsetHeight) 
     currentfr.height = currentfr.contentDocument.body.offsetHeight+FFextraHeight; 
    else if (currentfr.Document && currentfr.Document.body.scrollHeight) 
     currentfr.height = currentfr.Document.body.scrollHeight; 
    if (currentfr.addEventListener) 
     currentfr.addEventListener("load", readjustIframe, false); 
    else if (currentfr.attachEvent){ 
     currentfr.detachEvent("onload", readjustIframe); 
     currentfr.attachEvent("onload", readjustIframe); 
    } 
    } 
}; 
function readjustIframe(loadevt) { 
    var crossevt=(window.event)? event : loadevt; 
    var iframeroot=(crossevt.currentTarget)? crossevt.currentTarget : crossevt.srcElement; 
    if (iframeroot)resizeIframe(iframeroot.id); 
}; 

function loadintoIframe(iframeid, url){ 
    if (document.getElementById)document.getElementById(iframeid).src=url; 
}; 
</script> 

/** 
* child iFrame html 
*/ 
<body onResize="resizeIE()">

來源

2012-03-26 19:28:48 JercSi

jquery與否跨瀏覽器兼容iframe調整大小（IE，Chrome，Safari，Firefox）

回答

相關問題