我有一個內置iframe的文檔類型頁面。我試圖覆蓋標準瀏覽器打印（Ctrl + p）僅打印iframe的內容。如何覆蓋標準瀏覽器打印並默認打印iframe
我知道如何使用JavaScript來打印iframe中的內容：
window.frames['webcontent'].focus();
window.frames['webcontent'].print();
我知道如何在打印之前例如做運行JavaScript如下所述：Check for when a user has selected to print using javascript
任何意見？
感謝
這是不可能的（使用Javascript）。在現代瀏覽器中有一些用戶啓動的打印事件的實驗性支持，但是那些are not cancelable（「簡單事件」），因此即使您插入自定義代碼來打印感興趣的幀，整個頁面仍會打印。
鑑於此限制，您最好的辦法可能是爲用戶提供一個大按鈕，用於激活您的自定義框架打印功能（請參見下面的printContentFrameOnly，不帶參數地觸發它），並希望它們使用按鈕而不是ctrl-p 。
如果將是可能的，這將是做到這一點的方式（基於this answer）：
// listener is a function, optionally accepting an event and
// a function that prints the entire page
addPrintEventListener = function (listener) {
// IE 5.5+ support and HTML5 standard
if ("onbeforeprint" in window) {
window.addEventListener('beforeprint', listener);
}
// Chrome 9+, Firefox 6+, IE 10+, Opera 12.1+, Safari 5.1+
else if (window.matchMedia) {
var mqList = window.matchMedia("print");
mqList.addListener(function (mql) {
if (mql.matches) listener(); // no standard event anyway
});
}
// Your fallback method, only working for JS initiated printing
// (but the easiest case because there is no need to cancel)
else {
(function (oldPrint) {
window.print = function() {
listener(undefined, oldPrint);
}
})(window.print);
}
}
printContentFrameOnly = function (event) {
if (event) event.preventDefault(); // not going to work
window.frames['webcontent'].focus();
window.frames['webcontent'].print();
}
addPrintEventListener(printContentFrameOnly);
您可以定義一個CSS文件進行打印：
@media print {
* { display: none; }
iframe { display: block; }
}
編輯
Mybad didnt進行了測試。
* { display: none; } is somehow overwriting all
但這是工作就像一個魅力
http://jsfiddle.net/c4e3H/
@media print {
h1, p{ display: none; }
}
不，它不工作，只是打印空白頁。即使沒有這條規則，Chrome瀏覽器也不會打印iframe內容，所以我不認爲我只能用CSS來做。 – Burjua
你的第一個不起作用，因爲'* {display：none; }'隱藏你的'iframe'（'html' /'body'）的父元素。 – cchamberlain
大哥，這可以通過CSS可以輕鬆實現：See thisJSfiddle: Tested
<style>
@media print{
body * {display:none;}
.toPrint{display:block; border:0; width:100%; min-height:500px}
}
</style>
設HTML文件爲：
<body>
<h3>I do not want this title Printed</h3>
<p> This paragraph should not be printed</p>
<iframe class="toPrint" src="http://akitech.org"></iframe>
<button onclick="window.print()">Print</button>
</body>
使用'body * {}'選擇CSS中的所有主體元素 – tika
這就是要點。它在打印對話框呈現頁面時隱藏所有主體元素，以僅顯示iframe（由於第二個css規則）。它不適用於iframe的主體，因爲框架的父窗口的CSS對它沒有影響。 – Slight
這會打印一個iframe，滾動條在Chrome和IE中爲我裁剪內容。 – cchamberlain
我能想到的唯一方法是隱藏除iframe之外的文檔中的所有內容，並使其適合整個文檔。
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<style type="text/css">
body.hide *, body #backdrop
{
display: none !important;
}
body.hide #my_print_iframe, body.hide #backdrop
{
background: white;
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
border: 0;
width: 100%;
height: 100%;
display: block !important;
}
@media print {
body.hide #backdrop
{
display: none !important;
}
}
</style>
<script>
$(document).on('keydown', function(e){
if (e.keyCode == 80 && (e.metaKey || e.ctrlKey)) {
$("body").addClass('hide');
setTimeout(function(){
$("body").removeClass('hide');
},1000)
}
})
</script>
</head>
<body>
<div>
this is some visible text
</div>
<iframe id="my_print_iframe" src="//example.com"></iframe>
</body>
</html>
我用超時（討厭我知道），因爲至少鉻38 Ctrl + P鍵
嗨可能這個代碼將會幫助你..
function PrintElem(elem)
{
Popup($(elem).html());
}
function Popup(data)
{
var mywindow = window.open('', 'printMe', 'height=400,width=600');
mywindow.document.write('<html><head><title>Print Me</title>');
mywindow.document.write('</head><body >');
mywindow.document.write(data);
mywindow.document.write('</body></html>');
mywindow.print();
mywindow.close();
return true;
}
並在頁面上調用PrintElem（'iframe'）函數。
這個想法是在頁面上的某處設置iframe內容，並通過隱藏原始內容來僅打印該內容。
這可以通過在啓動Ctrl + P事件（通過JavaScript）時獲取iframe內容並僅打印其內容（通過CSS @media類型）來完成。
HTML代碼：
<div id="dummy_content"><!-- Here goes the iframe content, which will be printed --></div>
<div id="content_wrapper">
<div id="current_content">Current Content that the user see<div>
<iframe id="myIframe" src="iframe.html"></iframe>
</div>
CSS代碼：
@media screen {
#dummy_content {
display:none; /* hide dummy content when not printing */
}
}
@media print {
#dummy_content {
display:block; /* show dummy content when printing */
}
#content_wrapper {
display:none; /* hide original content when printing */
}
}
JavaScript代碼：
var dummyContent = document.getElementById("dummy_content");
function beforePrint() {
var iFrame = document.getElementById("myIframe");
dummyContent.innerHTML = iFrame.contentWindow.document.body.innerHTML; // populate the dummy content (printable) with the iframe content
}
document.onkeydown = function(e) {
if (e.ctrlKey && e.keyCode == 80) {
beforePrint();
}
}
我一直在尋找一個JavaScript解決方案，因爲CSS不適合我。標記爲答案。 – Burjua
謝謝。對於它的價值，我完全同意xDNP應得賞金獎，並且我也提出了他們的答案。 – Julian