A JavaScript function is used to calculate the height of an iframe element and the document height, then determine if the iframe is on or off based on its height and display properties. The issue arises when changing pages— if the height is less than the previous page, it fails to recalculate and set the height correctly. However, if the height is larger, it recalculates and sets the height accordingly. To address this, an onload="javascript:autoHeight" is added to the body tag on every page, ensuring the function is called each time a new page loads for accurate height calculation. For more code details:
function autoHeight(){
var docHeight = $(document).height();
var radioHeight = parent.$("#radioiframe").height();
if (radioHeight == 34){
parent.$('#content').css({'height': docHeight + 34+ 'px'});
alert("radio iframe is on");
}
else {
parent.$('#content').css({'height': docHeight+ 'px'});
alert("radio iframe is off");
}
};
After finding a solution independently, I realized a workaround that involves setting the height to 1px every time the function runs before allowing it to execute fully.
function autoHeight(){
parent.$('#content').css({'height': 1+ 'px'});
var docHeight = $(document).height();
var radioHeight = parent.$("#radioiframe").height();
if (radioHeight == 34){
parent.$('#content').css({'height': docHeight + 34+ 'px'});
alert("radio iframe is on");
}
else {
parent.$('#content').css({'height': docHeight+ 'px'});
alert("radio iframe is off");
}
};