iframe在Firefox上调整大小，仅延伸不缩小

您好，我可以在iframe上进行调整大小的交叉浏览器应用程序。IE，Firefox，Chrome Ans Safari。

调整大小在IE上运作良好，但对其他大小效果不佳。其他人部分工作。发生的事情是，当您扩展iframe时，它不能被缩小或减少。我在iframed页面中使用的代码将带回最后一个和最高的价值。因此，每次我更新大小时，都会带来这些值。

这是IM使用的代码：

父母：main.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 >

iframediframed.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>

请帮助解决此问题。

我解决了我的问题的答案，这很简单。我必须对iframed脚本进行的唯一更改是而是使用文档。Body.scrollheight，我使用了包含所有内容的DIV元素的高度。使用Now document.getElementById（'divname'）。卷轴；那对我有用。一旦获得计算机，我将添加完整的过度。我正在使用Stack Exchange的Android应用。

相关内容

最新更新

热门标签：