Javascript 除非调整窗口大小，否则iFrame不会加载到Chrome中_Javascript_Jquery_Html_Iframe

Javascript 除非调整窗口大小，否则iFrame不会加载到Chrome中

javascript jquery html iframe

Javascript 除非调整窗口大小，否则iFrame不会加载到Chrome中,javascript,jquery,html,iframe,Javascript,Jquery,Html,Iframe,我有一个如下的网页，左边有发票编号，当用户点击它时，它的详细信息会加载到iframe（id='invoiceFrame'）中，这在IE中运行良好，但在Chrome中，除非调整窗口大小，否则不会加载iframe Google Chrome 42.0.2311.90版（官方版本）m（32位）函数getUrlParameter（URL，param）{ var paramTokens=URL.slice（URL.indexOf（'？'）+1.split（'&'）； for（var i=0；i=0&&

我有一个如下的网页，左边有

发票编号

，当用户点击它时，它的详细信息会加载到

iframe（id='invoiceFrame'）

中，这在IE中运行良好，但在Chrome中，除非调整窗口大小，否则不会加载iframe

Google Chrome 42.0.2311.90版（官方版本）m（32位）


函数getUrlParameter（URL，param）{
var paramTokens=URL.slice（URL.indexOf（'？'）+1.split（'&'）；
for（var i=0；i=0&&this.lastIndexOf（pattern）==d；
};
功能调整框架（obj）{
obj.style.height=obj.contentWindow.document.body.scrollHeight+'px'；
}
jQuery（文档）.ready（函数（）{
jQuery（“#大型机”）.hide（）；
jQuery（“#发票列表tr:not（：first child）”）。单击（函数（e）{
jQuery（“.message”）.hide（）；
e、 预防默认值（）；
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（“#大型机”）.show（）；
document.getElementById（“mainFrame”）.src=invURL；
});
});
h2.消息{文本对齐：居中；颜色：#FDFDFD；字体大小：1.1em；背景：#708fc3；}
#发票列表{float:left；width:15%；overflow-x:auto；}
#invoiceFrame{float:右侧；宽度：83.5%；页边距底部：0em！重要；}
td错误{颜色：红色；字体大小：100%；}
tr.errortrue{color:#c33；字体大小：100%；字体大小：粗体；}
表#线条{背景颜色：灰色；颜色：白色；宽度：100%}
表{边距底部：2em；边框底部：2px实心#ebebebeb；空单元格：显示；边框折叠：折叠；}
表#行td{文本对齐：中心；宽度：100%}
iframe{float:左；宽度：100%；高度=300px；
}
ePack P0000080235的发票错误详细信息
发票
发票号码
发票总额
2015.04.08.001
59.97
选择左侧的发票号以查看错误详细信息

以下是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>


jQuery（'table#line tr'）。每个（函数（）{
if（jQuery（this）.html（）=''）{
jQuery（this.hide（）；
}
});
#发票{填充：0；}
#发票错误{overflow-x:auto；overflow-y:auto；}
tbody td{边框顶部：2px实心#efefef；边框底部：0px！重要；}
td.error{文本对齐：左；颜色：#c33；字体大小：100%；背景图像：无！重要信息；左填充：0；边框底部：2px实心#0891F4；空白：nowrap；}
tr.errortrue{color:#c33；字体大小：100%；字体大小：粗体；空白：nowrap；}
表{空单元格：显示；边框折叠：折叠；}
表#行td{text align:left；}
标题详细信息
发票号码
物号
发票总额
发票税总额
发票净额
2015.04.08.001
MAT-2
59.97
59.97
59.97
行：1未报告发票税总额=（0.0）已计算=（1.0）

行：1发票未报应纳税额=（59.97）计算=（58.97）

发票行项目
行式项目号码
行项目日期
单位成本
单位数量
行项目总计
1.
20150402
19.99
3.
59.97
行：1数学错误：（（19.99*3.0）-（0.0））*（1.0）！=1.0方差=58.97

行：1个数学错误：（19.99*3.0）-（0.0）+（1.0）！=59.97方差=1.0

有人能帮我解决iframe问题吗？

尝试向iframe添加位置

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

我使用此解决方案使其工作：

var iframe = $('<iframe>', {
  src: url,
  frameborder: 0,
  load: function () {
    // fixes Chrome not painting iframe until window resizes
    // https://bugs.chromium.org/p/chromium/issues/detail?id=481922
    iframe.contents().find('body').hide(0).show(0);
    // end repaint fix
  }
});

var iframe=$（“”{
src:url，
帧边框：0，
加载：函数（）{
//修复了在窗口调整大小之前不绘制iframe的Chrome
// https://bugs.chromium.org/p/chromium/issues/detail?id=481922
iframe.contents（）.find（'body'）.hide（0）、show（0）；
//端部重新喷漆修复
}
});

iframe{float:left；width:100%；height=300px；}您的高度在CSS中声明不正确。@GaryHayes将CSS更新为

height:300px

，但在Chrome中仍然存在相同的问题

var iframe = $('<iframe>', {
  src: url,
  frameborder: 0,
  load: function () {
    // fixes Chrome not painting iframe until window resizes
    // https://bugs.chromium.org/p/chromium/issues/detail?id=481922
    iframe.contents().find('body').hide(0).show(0);
    // end repaint fix
  }
});