Я делаю небольшой скрипт для печати части страницы.Идея заключается в том, что на странице есть одна таблица, которую я хотел бы скопировать в iframe и распечатать.Проблема в том, что куча стилей для этой таблицы разбросана между ссылками таблицы стилей и просто необработанными объектами стиля в теге <HEAD>
.
Итак, у меня есть что-то вроде этого:
...
<link to stylesheet>
<style>
#printable { font-size: 50px; }
</style>
...
</head>
<body>
Never print me.
<div id="printable">Please print only me</div>
Don't print me either
...
Затем я прикрепил этот jQuery к кнопке:
var printable = $('#printable');
//make an iframe that's not visible on the screen
$('<iframe name="printer" id="printer" style="width:1px;height:1px;position:absolute;left:-10000px" >'+
'<html><head></head><body>'+
'</body></html></iframe>').load(function(){
//when it loads, add the links and styles to it along with the printable div
$(this).contents().find('head')
.append($('link').clone())
.append($('<style/>',{html:$('style').html()}))
.end()
.find('body')
.append(printable.clone());
//print only the iframe
document.printer.focus();
document.printer.print();
}).appendTo(document.body);
Моя жалоба связана с прикреплением ссылок и стилей.В Chrome я могу использовать гораздо более простой $('link,style').clone()
в моих операторах добавления, но в IE это, похоже, ничего не делает - по крайней мере, насколько я вижу, стили не превращаются в iframe.Я уже видел ту же самую проблему с динамическим созданием тегов скрипта и раньше, и мне кажется, я пытаюсь понять, в чем заключается основная разница между тегами скрипта / стиля и чем-то еще (по крайней мере, в отношении IE).