javascript - Iframe resize on firefox, only extending not shrinking -
hello im working on iframe resize cross browser apps. ie, firefox, chrome ans safari specifically.
resize works on ie not on others. on others work partially. happening when expand iframe cannot shrinked or reduce. code using in iframed page bringing last , highest value used. every time update size, brings thesame value.
here code im using this:
parent: 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 message 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 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 post parent iframe regardless of domain } settimeout(adjust_iframe_height, 2000); document.onclick = function () { adjust_iframe_height(); } </script> </body> </html> please issue.
i fou d answer problem, simple. change had make iframed script instead of using document.body.scrollheight, used height of div element containing content. using document.getelementbyid ('divname').scrollheight; worked me. add complete aolution once computer. im using android app of stack exchange.
Comments
Post a Comment