jQuery.printArea 插件Bug

来源:互联网 发布:怎样投诉农村淘宝服务 编辑:程序博客网 时间:2024/05/16 12:50

jQuery.printArea.js 2.1版源码如下

(function ($) {

    var counter = 0;
    var modes = { iframe: "iframe", popup: "popup" };
    var defaults = { mode: modes.iframe,
        popHt: 500,
        popWd: 400,
        popX: 200,
        popY: 200,
        popTitle: '',
        popClose: false
    };

    var settings = {}; //global settings

    $.fn.printArea = function (options) {
        $.extend(settings, defaults, options);

        counter++;
        var idPrefix = "printArea_";
        $("[id^=" + idPrefix + "]").remove();
        var ele = getFormData($(this));

        settings.id = idPrefix + counter;

        var writeDoc;
        var printWindow;

        switch (settings.mode) {
            case modes.iframe:
                var f = new Iframe();
                writeDoc = f.doc;
                printWindow = f.contentWindow || f;
                break;
            case modes.popup:
                printWindow = new Popup();
                writeDoc = printWindow.doc;
        }

        writeDoc.open();
        writeDoc.write(docType() + "<html>" + getHead() + getBody(ele) + "</html>");
        writeDoc.close();

        printWindow.focus();
        printWindow.print();

        if (settings.mode == modes.popup && settings.popClose)
            printWindow.close();
    }

    function docType() {
        if (settings.mode == modes.iframe || !settings.strict) return "";

        var standard = settings.strict == false ? " Trasitional" : "";
        var dtd = settings.strict == false ? "loose" : "strict";

        return '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01' + standard + '//EN" "http://www.w3.org/TR/html4/' + dtd + '.dtd">';
    }

    function getHead() {
        var head = "<head><title>" + settings.popTitle + "</title>";
        $(document).find("link")
            .filter(function () {
                return $(this).attr("rel").toLowerCase() == "stylesheet";
            })
            .filter(function () { // this filter contributed by "mindinquiring"
                var media = $(this).attr("media");
                if (media == undefined) {
                    return false;
                }
                else {
                    return (media.toLowerCase() == "" || media.toLowerCase() == "print");
                }
            })
            .each(function () {
                head += '<link type="text/css" rel="stylesheet" href="' + $(this).attr("href") + '" >';
            });
        head += "</head>";
        return head;
    }

    function getBody(printElement) {
        return '<body><div class="' + $(printElement).attr("class") + '">' + $(printElement).html() + '</div></body>';
    }

    function getFormData(ele) {
        $("input,select,textarea", ele).each(function () {
            // In cases where radio, checkboxes and select elements are selected and deselected, and the print
            // button is pressed between select/deselect, the print screen shows incorrectly selected elements.
            // To ensure that the correct inputs are selected, when eventually printed, we must inspect each dom element
            var type = $(this).attr("type");
            if (type == "radio" || type == "checkbox") {
                if ($(this).is(":not(:checked)")) this.removeAttribute("checked");
                else this.setAttribute("checked", true);
            }
            else if (type == "text")
                this.setAttribute("value", $(this).val());
            else if (type == "select-multiple" || type == "select-one")
                $(this).find("option").each(function () {
                    if ($(this).is(":not(:selected)")) this.removeAttribute("selected");
                    else this.setAttribute("selected", true);
                });
            else if (type == "textarea") {
                var v = $(this).attr("value");
                if ($.browser.mozilla) {
                    if (this.firstChild) this.firstChild.textContent = v;
                    else this.textContent = v;
                }
                else this.innerHTML = v;
            }
        });
        return ele;
    }

    function Iframe() {
        var frameId = settings.id;
        var iframeStyle = 'border:0;position:absolute;width:0px;height:0px;left:0px;top:0px;';
        var iframe;

        try {
            iframe = document.createElement('iframe');
            document.body.appendChild(iframe);
            $(iframe).attr({ style: iframeStyle, id: frameId, src: "" });
            iframe.doc = null;
            iframe.doc = iframe.contentDocument ? iframe.contentDocument : (iframe.contentWindow ? iframe.contentWindow.document : iframe.document);
        }
        catch (e) { throw e + ". iframes may not be supported in this browser."; }

        if (iframe.doc == null) throw "Cannot find document.";

        return iframe;
    }

    function Popup() {
        var windowAttr = "location=yes,statusbar=no,directories=no,menubar=no,titlebar=no,toolbar=no,dependent=no";
        windowAttr += ",width=" + settings.popWd + ",height=" + settings.popHt;
        windowAttr += ",resizable=yes,screenX=" + settings.popX + ",screenY=" + settings.popY + ",personalbar=no,scrollbars=no";

        var newWin = window.open("", "_blank", windowAttr);

        newWin.doc = newWin.document;

        return newWin;
    }

})(jQuery);

出现的问题,点击打印的时候没有反应(正在等待的...)

经过FireDebug调试发现问题的代码如下:

function getHead() {
       ... ...
       var media = $(this).attr("media");

       return (media.toLowerCase() == "" || media.toLowerCase() == "print"); //此时media变量没有定义。因此停顿问题出现在这里。经过如下修改正常:

       if (media == undefined) {
                return false;
        }
        else {
                   return (media.toLowerCase() == "" || media.toLowerCase() == "print");
         }

HTML <link>标签

定义和用法

media属性规定被链接文档将显示在什么设备上

media属性用于为不同的媒介类型规定不同的样式

浏览器支持

所有浏览器都支持值为"screen","print"以及"all"的media属性。

提示:在全屏模式中,opera也支持"projection"属性值

语法

<link media="value">

属性值

screen:计算机屏幕(默认)

tty:电传打字机以及类似的使用等宽字符网络的媒介

tv:电视机类型设备(低分辨率、有限的滚屏能力)

projection:放映机

handheld:手持设备(小屏幕、有限带宽)

print:打印机预览模式/打印页面

braille:盲人点字法反馈设备

aural:语音合成器

all:适用于所有设备