【发布时间】：2015-09-02 12:43:25
【问题描述】：
我在 HTML 中有一个iframe（代码如下所示）。当我尝试print iframe 除了虚线之外，print 中没有出现任何内容（这特别发生在Google Chrome 上，在Firefox 上它工作正常）。
我正在使用custom fonts。
代码如下：
<html>
<head>
<script type="text/javascript">
function printDiv() {
var browser = get_browser_info();
window.document.getElementById('print_frame').contentWindow.document.body.innerHTML = document.getElementById('modal').innerHTML;
if((browser.name=="MSIE" || browser.name=="msie" || browser.name=="IE" || browser.name=="ie")) {
window.document.getElementById('print_frame').contentWindow.document.execCommand('print', false, null);
}else{
window.document.getElementById('print_frame').contentWindow.focus();
window.document.getElementById('print_frame').contentWindow.print();
}
window.document.getElementById('print_frame').contentWindow.document.body.innerHTML = "";
return false;
}
function get_browser_info(){
var ua=navigator.userAgent,tem,M=ua.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i) || [];
if(/trident/i.test(M[1])){
tem=/\brv[ :]+(\d+)/g.exec(ua) || [];
return {name:'IE',version:(tem[1]||'')};
}
if(M[1]==='Chrome'){
tem=ua.match(/\bOPR\/(\d+)/)
if(tem!=null) {return {name:'Opera', version:tem[1]};}
}
M=M[2]? [M[1], M[2]]: [navigator.appName, navigator.appVersion, '-?'];
if((tem=ua.match(/version\/(\d+)/i))!=null) {M.splice(1,1,tem[1]);}
return {
name: M[0],
version: M[1]
};
}
</script>
</head>
<body>
<div id="modal" style="display: none;">
<style type="text/css">
@font-face {
font-family: ROsans;
src: url(ROsanswebtextregular-webfont.eot?) format('embedded-opentype'),
url(ROsanswebtextregular-webfont.woff) format('opentype'),
url(ROsanswebtextregular-webfont.svg#filename) format('svg'),
url(ROsanswebtextregular-webfont.ttf) format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: ROsans;
src: url(ROsanswebtextbold.eot?) format('embedded-opentype'),
url(ROsanswebtextbold.woff) format('opentype'),
url(ROsanswebtextbold.ttf) format('truetype');
font-weight: bold;
font-style: normal;
}
</style>
<div
style="width: 100%; font-family: ROsans, Arial, Verdana, sans-serif;">
<h4 style="font-size: 0.8em;">This is H4</h4>
<br> <br> <span style="font-size: 2em; padding-top: 2px;">This
is First Span</span> <br>
<div
style="border-top-width: 4px; border-top-style: dotted; border-top-color: #000; padding-top: 10px">
<table style="width: 100%; background-color: #fff;">
<tbody>
<tr>
<td style="width: 30%; font-size: 0.8em;">First TD</td>
<td style="width: 70%; font-weight: bold; font-size: 0.8em;">second
TD</td>
</tr>
<tr>
<td style="font-size: 0.8em;">third TD</td>
<td style="font-size: 0.8em; font-weight: bold;">fourth TD</td>
</tr>
<tr>
<td style="font-size: 0.8em;">fifth TD</td>
<td style="font-size: 0.8em;">sixth TD</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<iframe title="myIframe" id="print_frame" name="print_frame" width="0"
height="0" style="display: none;"></iframe>
<Button id="iframeGen" onclick="printDiv();">Generate</Button>
</body>
</html>【问题讨论】：
标签： html google-chrome iframe printing custom-font