个人中心
gpt4 book ai didi

javascript - 除非调整窗口大小，否则 iFrame 不会在 Chrome 中加载

转载 作者：行者123 更新时间：2023-11-27 23:46:18 25 4
gpt4 key购买 nike

我有一个如下所示的网页，左侧有发票编号，当用户点击它时，它的详细信息会加载到 iframe(id='invoiceFrame') 在 IE 中工作正常，但在 Chrome 中 iframe 不会加载，除非调整窗口大小

Google Chrome 版本 42.0.2311.90(正式版)m(32 位)

<script type="text/javascript">
   function getUrlParameter(URL, param){
    var paramTokens = URL.slice(URL.indexOf('?') + 1).split('&');
    for (var i = 0; i < 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 For 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 the Invoice Number on the left to view the error details</span></h2>-->
<h2 class='message'><span>Select the Invoice Number on the left to view the 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>

下面是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 does not foot Reported = (0.0) Calculated = (1.0)<br/>

              Line : 1 Invoice Taxable Amount does 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>

有人可以帮我解决 iframe 问题吗？

最佳答案

尝试将位置添加到 iframe

iframe { float: left; width: 100%; height :300px; position:relative}

关于javascript - 除非调整窗口大小，否则 iFrame 不会在 Chrome 中加载，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29803676/

25 4 0
文章推荐： jquery - html2canvas - 安全错误 : The operation is insecure
文章推荐： c++ - 模板实例化解析错误
文章推荐： javascript - AngularJS 通过服务传递数据，但在页面刷新时丢失数据
文章推荐： javascript - 单击并更改处理程序在 Chrome 上同时触发
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com