Question

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

调整大小在IE上运行良好，但在其他情况下运行不正常。其他人的工作部分。发生的事情是，当您展开iframe时，它无法缩小或缩小。我在iframed页面中使用的代码将返回使用的最后一个和最高值。因此，每次更新大小时，都会带来相同的价值。

以下是我正在使用的代码：

父： 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 >

的iFrame 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>

请帮助解决这个问题。

Answer 1

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

iframe在firefox上调整大小，只是扩展而不缩小

1 个答案: