window.open and print problem in Evil IE

今天遇到一個奇怪的bug，需求如下：

點選print，跳出新視窗，為了不要再做一次server端的溝通，要將目前的DOM Element傳到新視窗。

新視窗打開要直接跳出print panel

不直接print()是因為列印功能不需要列印目前完整的頁面，只需要列印目前頁面的某一個Element內容。

看起來很簡單的需求，沒想到在IE上踢到了鐵板。測試source code 如下：

var win = window.open('');
var html = '&lt;div&gt;hello blank &lt;/div&gt;';
win.document.write(html);
win.print();
win.focus();

有趣的是，只有IE不會執行print，而且是IE所有系列，更過份的是，連任何message都沒有出現。

測試連結：popup-using-print.html(只有IE無法出現print panel)

有趣了，我決定要好好地測試一下，既然沒辦從外部呼叫print來執行，那就從內部滲透，於是我把程式改成如下：

var win = window.open('');
var html = '&lt;div&gt;hello blank &lt;/div&gt;';
html += ['&lt;scr','ipt ','&gt;','(function(){ window.print();})()','&lt;\/','sc','ript&gt;'].join('');
win.document.write(html);
win.focus();

稍微解釋一下code，我在最後加上一段直接執行的程式，直接做print()，我在本機端執行可以運作，不過會跳出警告視窗，但看起來應該是可以work。於是我放到server端執行，Damn it，it still doesn’t work. 一樣沒有Error message。奇怪的是，按下F5(重新整理)，就跳出列印視窗了，啊哈～重新整理還不簡單，天外飛來一行code：

var win = window.open('');
var html = '&lt;div&gt;hello blank &lt;/div&gt;';
html += ['&lt;scr','ipt ','&gt;','(function(){ window.print();})()','&lt;\/','sc','ript&gt;'].join('');
win.document.write(html);
win.location.reload(); 
win.focus();

測試連結：popup and print

竟然可以了，而且在其他瀏覽器也能正常運作，perfect !!，不過等等，那這樣的話跟外部執行和內部滲透搞不好沒關係，於是我將內部滲透再改回外部執行，果然可以正常運作。我想這以後應該可以派得上用場，於是將他寫成一個function。結果搞了半天只需要reload就可以解決了，唉～真是萬惡的IE。

function openPrint(elm){
    var html = typeof elm == 'string' ? elm: elm.innerHTML;
    var win = window.open('');
    win.document.write(html);
    win.print();
    win.location.reload(); 
    win.focus();
}

參考連結：

quirks mode JavaScript - Popups