Primefaces printer.js有什么作用？

Question

我是JQuery和Primefaces的新手.

下面的代码(printer.js)在Primefaces中用于打印所需的目标 <p:printer target="targetId">

我正在尝试打印一个位于对话框内的Primefaces面板的内容,它在IE8和其他浏览器中工作正常,但在IE9及以上版本中它会抛出一个错误 "Internet Stopped Working"

How can i Fix this issue ? Can any one Explain what Does that printer.js Do ?

printer.js

 (function(b){var a;
                    b.fn.jqprint=function(d){a=b.extend({},b.fn.jqprint.defaults,d);
                    var c=(this instanceof jQuery)?this:b(this);
                        if(a.operaSupport&&b.browser.opera){
                            var e=window.open("","jqPrint-preview");
                                e.document.open();
                                var g=e.document
                        }else{
                            var f=b("<iframe  />");
                            if(!a.debug){
                                f.css({position:"absolute",width:"0px",height:"0px",left:"-600px",top:"-600px"})
                            }
                            f.appendTo("body");
                            var g=f[0].contentWindow.document
                        }
                        if(a.importCSS){
                            if(b("link[media=print]").length>0){
                                b("link[media=print]").each(function(){g.write("<link type='text/css' rel='stylesheet' href='"+b(this).attr("href")+"' media='print' />")})
                            }else{
                                b("link").each(function(){g.write("<link type='text/css' rel='stylesheet' href='"+b(this).attr("href")+"' />")})\
                                }
                        }
                        if(a.printContainer){
                            g.write(c.outer())
                        }else{
                            c.each(function(){g.write(b(this).html())})
                        }g.close();
                        (a.operaSupport&&b.browser.opera?e:f[0].contentWindow).focus();setTimeout(function(){(a.operaSupport&&b.browser.opera?e:f[0].contentWindow).print();if(e){e.close()}},1000)
                    };
                    b.fn.jqprint.defaults={debug:false,importCSS:true,printContainer:true,operaSupport:true};
                    jQuery.fn.outer=function(){return b(b("<div></div>").html(this.clone())).html()}
                })(jQuery);

Answer 1

printer.js如何工作？

printer.js 基本上这样做.

• 创建一个iframe并附加到body(或打开Opera的新窗口)
• 附加页面的链接样式表(media=print首先检查,否则所有样式都应用于所有样式表)
• 将所选对象(或其内容取决于传递的选项)附加到iframe /窗口
• 将焦点设置在窗口上,并调用.print()哪个应该告诉浏览器在这种情况下打印"文档"iframe/window的内容

那么对于PrimeFace网站上的演示,

代码

<p:commandButton value="Print" type="button">
    <p:printer target="image" />
</p:commandButton>

<p:graphicImage id="image" name="demo/images/nature/nature10.jpg" />

会创建附加到生成的"按钮"的内联代码

PrimeFaces.expressions.SearchExpressionFacade
  .resolveComponentsAsSelector('image') //resolves to $(document.getElementById())
  .jqprint();
return false;

为了完整起见,我评论了printer.js源代码

var options;
$.fn.jqprint.defaults = {
    debug: false,
    importCSS: true,
    printContainer: true,
    operaSupport: true
};
jQuery.fn.outer = function () {
    return $($("<div></div>").html(this.clone())).html()
}

$.fn.jqprint = function (passedOptions) {
 //make options from passedOptions and default options
 options = $.extend({}, $.fn.jqprint.defaults, passedOptions);

 //get a jQuery object of the objects to be printed. in this case #image.
 var objects_to_be_printed = (this instanceof jQuery) ? this : $(this);

 //create window or iframe and get the document obj
 if (options.operaSupport && $.browser.opera) {
     var open_window = window.open("", "jqPrint-preview");
     open_window=document.open();
     var document_obj = open_window.document
 } else {
     var iframe= $("<iframe  />");
     if (!options.debug) {
         iframe.css({
             position: "absolute",
             width: "0px",
             height: "0px",
             left: "-600px",
             top: "-600px"
         })
     }
     iframe.appendTo("body");
     var document_obj = iframe[0].contentWindow.document
 }

 //append document's CSS to frame/window
 if (options.importCSS) {
     if ($("link[media=print]").length > 0) {
         $("link[media=print]").each(function () {
             document_obj
               .write("<link type='text/css' rel='stylesheet' href='" + $(this).attr("href") + "' media='print' />")
         })
     } else {
         $("link").each(function () {
             document_obj
               .write("<link type='text/css' rel='stylesheet' href='" + $(this).attr("href") + "' />")
         })
     }
 }

 //appaned selected objects into frame/window
 if (options.printContainer) {
     document_obj.write(objects_to_be_printed.outer())
 } else {
     objects_to_be_printed.each(function () {
         document_obj.write($(this).html())
     })
 }
 document_obj.close(); //close document stream and render data

 //focus on new frame/window
 (options.operaSupport && $.browser.opera ? open_window : iframe[0].contentWindow).focus();

 //wait for 1second before opening printing page
 setTimeout(function () {
     (options.operaSupport && $.browser.opera ? open_window : iframe[0].contentWindow).print();
     if (open_window) {
         open_window.close() //close window if window was used
     }
 }, 1000)
};

是什么导致IE9失败？

老实说,在这种情况下,我不太确定.我想,在这个例子中,它只是IE处理window.print()不同.因此,搜索" window.print()ie9"应该比" printer.jsie9" 更富有成效.这个stackoverflow问题似乎有很多我们可以尝试的选项.

我没有便于测试的Windows机器,但是,例如,遵循这个高度赞成的答案,歌剧代码似乎是最兼容的(但也许在其评论中说明,iframe是首选,因为一些浏览器可能认为它是一个弹出或许).在这种情况下,修改printer.js和添加|| $.browser.msie 每个实例options.operaSupport && $.browser.opera可能会有所帮助.可能是一个黑客,但因为它已经使用浏览器检测可能也适合它.所以它看起来像

 if( options.operaSupport && $.browser.opera || $.browser.msie ) {
 ...
 (options.operaSupport && $.browser.opera || $.browser.msie 
     ? open_window : iframe[0].contentWindow).focus();
 ...
 (options.operaSupport && $.browser.opera || $.browser.msie 
     ? open_window : iframe[0].contentWindow).print();

希望有所帮助.