如何在iPad上使用Javascript打印iFrame的內容？

打印iFrame的內容已經成爲解決跨瀏覽器問題的一個難題。測試了很多方法（其中一些在這個網站還發現）後，我目前的做法似乎工作相當不錯的跨瀏覽器，看起來像這樣：如何在iPad上使用Javascript打印iFrame的內容？

function printUrl(elem, url) { 
    $('#' + elem).append("<iframe style='border: none; width: 0; height: 0; margin: 0; padding: 0;' src='" + url + "' id='printFrame'></iframe>"); 

    $('#printFrame').load(function() { 
     var w = (this.contentWindow || this.contentDocument.defaultView); 
     w.focus(); 
     w.print(); 
    }); 
}

只有輕微的問題，此代碼時使用iPad。 iPad打印包含iFrame的頁面，而不是iFrame的內容。 Mac上的Safari可以正確打印iFrame的內容。

有沒有人已經解決了這個問題，並能夠在iPad上打印iFrame的內容？

來源

2011-10-03 Jasper Kuperus

w'你認爲它會在iPad上？ –

不，這只是我在大多數瀏覽器中使用它的解決方案，不包括iPad。不知何故，這個w有一個參考iPad的頂部窗口，而不是iFrame。 –

'this'在你的'load'函數中有什麼價值？ –

好的，首先。我沒有解決問題。我創建了一個實際上可以僞造我想實現的解決方法。

因爲iPad/iPhone簡單的打印父頁面，我換了完整的身體在一個新的div，然後附加在IFRAME和一些樣式表這確保了打印的文檔只包含內嵌框架：

function printUrl(url) { 
    $newBody = "<div class='do_not_print_this'>" 
       + $('body').html() 
       + "</div>" 
       + "<iframe style='border: none; 0; width: 100%; margin: 0; padding: 0;' src='" + url + "' class='printFrame'></iframe>" 
       + "<style type='text/css' media='all'>.printFrame { position: absolute; top: -9999999px; left: -99999999px; }</style>" 
       + "<style type='text/css' media='print'>.do_not_print_this { display: none; } .printFrame { top: 0; left: 0; }</style>"; 
    $('body').html($newBody); 

    $('.printFrame').load(function() { 
     var w = (this.contentWindow || this.contentDocument.defaultView); 
     w.focus(); 
     w.print(); 
    }); 
}

在正常視圖中隱藏瀏覽器的iframe是使用絕對定位，在最終打印中使用無顯示或隱藏引入的怪異行爲完成的。

是的，它很醜。但是，這是目前我能想到的唯一選擇。如果您有任何人想出更好的解決方案，請告訴我。

來源

2011-10-06 13:26:50

這是否仍然有效？即使是版本1的iPad？ –

下面是工作在常綠的瀏覽器和iOS的最新版本的跨跨平臺功能：

function printElement(divid, title) 
{ 
    var contents = document.getElementById(divid).innerHTML; 
    var frame1 = document.createElement('iframe'); 
    frame1.name = "frame1"; 
    frame1.style.position = "absolute"; 
    frame1.style.top = "-1000000px"; 
    document.body.appendChild(frame1); 
    var frameDoc = frame1.contentWindow ? frame1.contentWindow : frame1.contentDocument.document ? frame1.contentDocument.document : frame1.contentDocument; 
    frameDoc.document.open(); 
    frameDoc.document.write('<html><head><title>' + title + '</title>'); 
    frameDoc.document.write('</head><body style="font-family: Arial, Helvetica, sans; font-size: 14px; line-height: 20px">'); 
    frameDoc.document.write('<h1>' + title + '</h1>'); 
    frameDoc.document.write(contents); 
    frameDoc.document.write('</body></html>'); 
    frameDoc.document.close(); 

    setTimeout(function() { 
    window.frames["frame1"].focus(); 
    window.frames["frame1"].print(); 
    }, 500); 

    //Remove the iframe after a delay of 1.5 seconds 
    //(the delay is required for this to work on iPads) 
    setTimeout(function() { 
    document.body.removeChild(frame1); 
    }, 1500); 
    return false; 
}

這是基於this answer稍作修改（重要線路document.body.removeChild(frame1);必須去除，以允許在iOS上打印。）

來源

2017-05-09 12:25:56 d13

回答

相關問題