iframe在firefox上调整大小，只扩展不缩小答案

【问题标题】：Iframe resize on firefox, only extending not shrinkingiframe在firefox上调整大小，只扩展不缩小
【发布时间】：2014-02-24 10:16:40
【问题描述】：

您好，我正在为跨浏览器应用程序调整 iframe 大小。 IE、Firefox、Chrome 和 Safari。

调整大小在 IE 上运行良好，但在其他浏览器上不行。在其他部分工作。发生的情况是，当您扩展 iframe 时，它无法缩小或缩小。我在 iframed 页面中使用的代码带回了最后使用的最高值。所以每次我更新大小时，它都会带来相同的价值。

这是我使用的代码：

家长：主.asp

<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
  <head runat="server">
<title>iframe  Resize A</title>
<script src="js/jquery-1.5.min.js" type="text/javascript"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<iframe frameborder="1" id="iframetest" src="http://localhost/testing1/iframed.html"></iframe>
</div>
</form>
<script type="text/javascript" language="javascript">
//Create IE + others compatible event handler
var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
var eventer = window[eventMethod];
var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";

//Listen to message from child window
eventer(messageEvent, function (e) {
//console.log('parent received message!:  ', e.data);
//console.log('parent received message!:  ', e.origin);

    var currH = 1700;
    var rcvH = parseInt ( e.data, 10 ); 

    //Verificando el origen
    if (e.origin == "http://localhost")
    {
        if (rcvH != undefined | | rcvH > 0 ) {
                document.getElementById('iframetest').style.height = (rcvH) + 'px';
    }
    else {
       document.getElementById('iframetest').height = currH + 'px';
    }
}
}, false); 
</script>
</body>
</html >

内嵌框架 iframed.html

<HTML>
<HEAD>
<TITLE>CampaĆƒĀ±as de SelecciĆƒĀ³n</TITLE>
<style type="text/css">
#tabdata h1
{
    border: 1px solid black;
    padding: 5px;
    padding-bottom:0px;
    font-size:14px;
    font-weight:bold; 
}

#tabdata div{
    text-align:center;
    padding:5px;
    padding-top:0px;
    font-size:12px;
    border:1px solid gray;
    border-top:0px;
}

#tabs-2, #tabs-3
{
    display:none;
}
</style>
<link type="text/css" rel="Stylesheet" href="css/myapp.css">
<link rel="stylesheet" href="js/jquery-ui-1.8.11/jquery-ui-1.8.11/themes/base/jquery-ui.css" />
<script language="javascript" type="text/javascript" src="js/jquery-1.5.min.js"></script>
<script language="javascript" type="text/javascript" src="js/jquery-ui-1.8.11/jquery-ui-1.8.11/ui/jquery-ui.js"></script>
</HEAD>

<BODY id="bcname">
<form id="form1" runat="server">
<div id="tabdata">

<table style="width:100%;">
    <tr>
        <td>
        <ul>
            <li><a href="javascript:void();" onclick="javascript: showHide('tabs-1');">Test</a></li><li><a href="javascript:void();" onclick="javascript: showHide('tabs-2');">Test 2</a></li><li><a href="javascript:void();" onclick="javascript: void ( ); " onclick="javascript : showHide ('tabs-3'); " > Test 3 </a> </li>
        </ul>
        </td>
    </tr >
    <tr>
        <td><div id="tabs-1">Test #1</div></td>
    </tr>
    <tr><td><div id="tabs-2">Test #2Test #2Test #2Test #2Test #2Test #2Test #2Test #2<br />Test #2Test #2Test #2TestTest #2Test #2Test #2Test #2Test #2Test #2Test #2Test #2<br />Test #2Test #2Test #2TestTest #2Test #2Test #2Test #2Test #2Test #2Test #2Test #2<br />Test #2Test #2Test #2Test<p>Test #2Test #2Test #2Test #2Test #2Test #2Test #2Test #2<br />Test #2Test #2Test #2TestTest #2Test #2Test #2Test #2Test #2Test #2Test #2Test #2<br />Test #2Test #2Test #2Test</p><p>Test #2Test #2Test #2Test #2Test #2Test #2Test #2Test #2<br />Test #2Test #2Test #2TestTest #2Test #2Test #2Test #2Test #2Test #2Test #2Test #2<br />Test #2Test #2Test #2Test</p><p>Test #2Test #2Test #2Test #2Test #2Test #2Test #2Test #2<br />Test #2Test #2Test #2TestTest #2Test #2Test #2Test #2Test #2Test #2Test #2Test #2<br /> Test #2Test #2Test #2Test</p><p>Test #2Test #2Test #2Test #2Test #2Test #2Test #2Test #2<br />Test #2Test #2Test #2TestTest #2Test #2Test #2Test #2Test #2Test #2Test #2Test #2<br />Test #2Test #2Test #2Test</p><p>Test #2Test #2Test #2Test #2Test #2Test #2Test #2Test #2<br />Test #2Test #2Test #2TestTest #2Test #2Test #2Test #2Test #2Test #2Test #2Test #2<br />Test #2Test #2Test #2Test</p><p>Test #2Test #2Test #2Test #2Test #2Test #2Test #2Test #2<br />Test #2Test #2Test #2TestTest #2Test #2Test #2Test #2Test #2Test #2Test #2Test #2<br />Test #2Test #2Test #2Test</p>Test #2Test #2Test #2Test #2Test #2Test #2Test #2Test #2<br />Test #2Test #2Test #2Test #2Test #2Test #2Test #2Test #2Test #2Test #2Test #2Test #2</div></td>
    </tr>
    <tr>
        <td><div id="tabs-3">Test #3</div></td>
    </tr>
</table>

<script language="javascript" type="text/javascript">
function showHide(lkObj) {
    var x = new Array("tabs-1", "tabs-2", "tabs-3");

for(ic=0;ic<3;ic++){
    if(x[ic]==lkObj){
        document.getElementById(x[ic]).style.display = "block";
    }
    else{
        document.getElementById(x[ic]).style.display = "none";
    }
}
}
</script>
<script language="javascript" type="text/javascript">

    function adjust_iframe_height() {
    var actual_height = document.body.scrollHeight;
    parent.postMessage(actual_height, "*");
    //* allows this to post to any parent iframe regardless of domain
}

setTimeout(adjust_iframe_height, 2000);

document.onclick = function () {     
adjust_iframe_height();
}

</script>

</BODY>
</HTML>

请帮助解决这个问题。

【问题讨论】：

标签： javascript firefox iframe cross-domain

【解决方案1】：

我找到了问题的答案，非常简单。我必须对 iframed 脚本进行的唯一更改不是使用 document.body.scrollHeight，而是使用包含所有内容的 div 元素的高度。现在使用 document.getElementById('divname').scrollHeight;这对我有用。一旦获得计算机，我将添加完整的解决方案。我正在使用堆栈交换的android应用程序。

【讨论】：