javascript - iFrame not loading in Chrome unless window is resized -
i have web page below has invoice numbers on left side , when user clicks on it, details loaded in iframe(id='invoiceframe') works fine in ie in chrome iframe not loaded unless window resized
google chrome version 42.0.2311.90 (official build) m (32-bit)
<script type="text/javascript"> function geturlparameter(url, param){ var paramtokens = url.slice(url.indexof('?') + 1).split('&'); (var = 0; < paramtokens.length; i++) { var urlparams = paramtokens[i].split('='); if (urlparams[0].endswith(param)) { return urlparams[1]; } } } string.prototype.endswith = function(pattern) { var d = this.length - pattern.length; return d >= 0 && this.lastindexof(pattern) === d; }; function resizeiframe(obj) { obj.style.height = obj.contentwindow.document.body.scrollheight + 'px'; } jquery(document).ready(function () { jquery("#mainframe").hide(); jquery('#invoicelist tr:not(:first-child)').click(function(e){ jquery(".message").hide(); e.preventdefault(); var invoicenumber = jquery(this).find("td").eq(0).text(); var url = window.location.href; var lipid = geturlparameter(url, 'lipid') var invurl = '/cp/invoice/invoicelineerrors.do?lipid='+lipid+'&invnum='+invoicenumber; console.log('invoicenumber '+invurl); jquery("#mainframe").show(); document.getelementbyid("mainframe").src =invurl; }); }); </script> <style> h2.message{text-align: center; color: #fdfdfd; font-size: 1.1em; background: #708fc3; } #invoicelist{ float: left; width: 15%; overflow-x:auto; } #invoiceframe{float: right; width: 83.5%; margin-bottom: 0em !important; } td error { color: red; font-size: 100%;} tr.errortrue { color: #c33; font-size: 100%; font-weight: bold;} table#lines th { background-color : grey; color: white; width:100%} table {margin-bottom: 2em; border-bottom: 2px solid #ebebeb; empty-cells: show; border-collapse: collapse; } table#lines td { text-align: center; width:100%} iframe { float: left; width: 100%; height =300px; } </style> </head> <body id='foo'> <div class="ui-widget"> <center><h1> invoice error details epacket p00000080235</h1></center> <div class="panel ui-widget-content" id="invoicelist"> <h2 class="ui-widget-header ui-corner-top" style="cursor: pointer; font-size: 1.1em; "><span>invoices</span></h2> <table cellspacing='0' id='header' class="ui-widget"> <tr> <th>invoice number</th> <th>invoice total</th> </tr> <tr class = 'errortrue'> <td>2015.04.08.001</td> <td>59.97</td> </tr> </table> </div> <!-- <div class='panel ui-widget-content' id="invoicedetails"> <h2 class="ui-widget-header ui-corner-top" style="cursor: pointer; "><span>select invoice number on left view error details</span></h2>--> <h2 class='message'><span>select invoice number on left view error details</span></h2> <div class='panel ui-widget-content' id="invoiceframe"><iframe src="" id="mainframe" name="mainframe" scrolling="no" class='panel ui-widget-content' onload='javascript:resizeiframe(this);'></iframe> </div> </div> </body> below content of iframe
<script type="text/javascript"> jquery('table#lines tr').each(function(){ if (jquery(this).html() == '') { jquery(this).hide(); } }); </script> <style> #invoice {padding: 0;} #invoiceerrors {overflow-x: auto; overflow-y: auto;} tbody td{ border-top: 2px solid #efefef; border-bottom: 0px !important ;} td.error { text-align: left; color: #c33; font-size: 100%; background-image: none !important; padding-left : 0; border-bottom: 2px solid #0891f4; white-space: nowrap;} tr.errortrue { color: #c33; font-size: 100%; font-weight: bold; white-space: nowrap;} table {empty-cells: show; border-collapse: collapse; } table#lines td { text-align: left;} </style> </head> <body id='invoice'> <div id="invoiceerrors"> <div class='panel ui-widget-content' id="invoiceheaders"> <h2 class="ui-widget-header ui-corner-top" style="cursor: pointer; font-family: tahoma,arial,sans-serif; font-size: 1.2em;"><span>header details</span></h2> <table class="ui-widget" id="headers"> <tr> <th>invoice number</th> <th>matter number</th> <th>invoice total</th> <th>invoice tax total</th> <th>invoice net total</th> </tr> <tr class='errortrue'> <td>2015.04.08.001</td> <td>mat-2</td> <td>59.97</td> <td>59.97</td> <td>59.97</td> </tr> <tr ><td class = 'error' style="padding-bottom: 4%;"> line : 1 invoice tax total not foot reported = (0.0) calculated = (1.0)<br/> line : 1 invoice taxable amount not foot reported = (59.97) calculated = (58.97)<br/> </td></tr> </table> </div> <div class='panel ui-widget-content' id="invoicelines"> <h2 class="ui-widget-header ui-corner-top" style="cursor: pointer; font-family: tahoma,arial,sans-serif; font-size: 1.2em;"><span>invoice line items</span></h2> <table class="ui-widget" id="lines"> <tr> <th>line item number</th> <th>line item date</th> <th>unit cost</th> <th>number of units</th> <th>line item total</th> </tr> <tr class='errortrue'> <td>1</td> <td>20150402</td> <td>19.99</td> <td>3</td> <td>59.97</td> </tr> <tr> <td colspan="9" class='error' style="padding-bottom: 6%;"> line : 1 math error: ((19.99*3.0) - (0.0)) * (1.0) != 1.0 variance = 58.97<br/> line : 1 math error: (19.99*3.0) - (0.0) + (1.0) != 59.97 variance = 1.0<br/> </td> </tr> </table> </div> </div> </body> can please me iframe issue?
try adding position iframe
iframe { float: left; width: 100%; height :300px; position:relative} 
Comments
Post a Comment