2012-11-24 74 views
2

Firefox 16/17追加到動態iframe- jQuery - 在Firefox中不工作

以下代碼是我寫的用於打印元素的jquery插件。

這是在Firefox中工作,但它現在只顯示一個空白頁面,頭部和身體都保持空白。這適用於Chrome瀏覽器的IE &。

github上: https://github.com/jasonday/jquery.printThis

演示: http://jsfiddle.net/jasonday/Tx4Uv/12/

代碼:

(function($) { 
    var opt; 

    $.fn.printThis = function (options) { 
     opt = $.extend({}, $.fn.printThis.defaults, options); 

     var $element = (this instanceof jQuery) ? this : $(this); 

    // if Opera, open a new tab 
     if ($.browser.opera) 
     { 
      var tab = window.open("","Print Preview"); 
      tab.document.open(); 

      var doc = tab.document; 
     } 
    // add dynamic iframe to DOM 
     else 
     { 
     var strFrameName = ("printThis-" + (new Date()).getTime()); 

      var $iframe = $("<iframe id='" + strFrameName +"' src='about:blank'/>"); 

      if (!opt.debug) { $iframe.css({ position: "absolute", width: "0px", height: "0px", left: "-600px", top: "-600px" }); } 

      $iframe.appendTo("body"); 

      var $doc = $("#" + strFrameName).contents(); 
     } 
    // allow iframe to fully render before action 
    setTimeout (function() { 

     // import page css 
     if (opt.importCSS) 
     { 
       $("link[rel=stylesheet]").each(function(){ 
       var href = $(this).attr('href'); 
       if(href){ 
         var media = $(this).attr('media') || 'all'; 
         $doc.find("head").append("<link type='text/css' rel='stylesheet' href='" + href + "' media='"+media+"'>"); 
        } 
     }); 
     } 

     // add another stylesheet 
     if (opt.loadCSS) 
     { 
     $doc.find("head").append("<link type='text/css' rel='stylesheet' href='" + opt.loadCSS + "'>"); 

     } 

     //grab outer container 
     if (opt.printContainer) { $doc.find("body").append($element.outer()); } 
     else { $element.each(function() { $doc.find("body").append($(this).html()); }); } 

     //$doc.close(); 
     // print 
     ($.browser.opera ? tab : $iframe[0].contentWindow).focus(); 
     setTimeout(function() { ($.browser.opera ? tab : $iframe[0].contentWindow).print(); if (tab) { tab.close(); } }, 1000); 

     //removed iframe after 60 seconds 
     setTimeout(
     function(){ 
     $iframe.remove(); 
     }, 
     (60 * 1000) 
     ); 
    }, 333); 
    } 


    $.fn.printThis.defaults = { 
     debug: false, //show the iframe for debugging 
     importCSS: true, // import page CSS 
     printContainer: true, // grab outer container as well as the contents of the selector 
     loadCSS: "" //path to additional css file 
    }; 


    jQuery.fn.outer = function() { 
     return $($('<div></div>').html(this.clone())).html(); 
    } 
})(jQuery); 

回答

1

修復已經實施。

$doc移至setTimeout function內解決問題。

setTimeout (function() { 

     if ($.browser.opera) 
      { 
     var $doc = tab.document; 
     } else 
     { 
     var $doc = $("#" + strFrameName).contents(); 
     } 
... 

代碼也在github上更新了。