jquery.printArea改进

百度搜索网页局部打印，很容易找到一个jquery的扩展jquery.printArea，这个扩展代码量很小，不过有一个问题：$(‘#printHtml’).printArea()，的#printHtml如果设置了样式，是不管用的，我改进了一下，代码如下：

(function($) {    var printAreaCount = 0;    $.fn.printArea = function() {        var ele = $(this);        var idPrefix = "printArea_";        removePrintArea(idPrefix + printAreaCount);        printAreaCount++;        var iframeId = idPrefix + printAreaCount;        var iframeStyle = 'position:absolute;width:0px;height:0px;left:-500px;top:-500px;';        iframe = document.createElement('IFRAME');        $(iframe).attr({            style: iframeStyle,            id: iframeId        });        document.body.appendChild(iframe);        var doc = iframe.contentWindow.document;        $(document).find("link").filter(function() {            return $(this).attr("rel").toLowerCase() == "stylesheet";        }).each(            function() {                // 这里是在将网页中的所有css引入，即打印区域的css如果是link进来的，可以设置在网页的任何位置                doc.write('<link type="text/css" rel="stylesheet" href="' + $(this).attr("href") + '" >');            });        doc.write($(ele).prop('outerHTML')); // 将待打印元素原封不动的引入        doc.close();        var frameWindow = iframe.contentWindow;        frameWindow.close();        frameWindow.focus();        // 必须等待frame加载完成后再打印，否则可能在某些浏览器中打印不出东西。        frameWindow.onload = function() {          frameWindow.print();        };    }    var removePrintArea = function(id) {        $("iframe#" + id).remove();    };})(jQuery);

主要问题在于：doc.write($(ele).prop('outerHTML')); jquery将元素本身引入网页，要用到$(selector).prop('outerHTML')，而不必使用：doc.write('<div class="' + $(ele).attr("class") + '">' + $(ele).html()  + '</div>');这种复杂的方法。何况这里只有class被引入，并没考虑到id。