Jquery print part of web page issue in IE_问答_开发者

Jquery print part of web page issue in IE

开发者 https://www.devze.com 2023-04-05 01:10 出处：网络

I have tried using the following JQuery print plugin in order to print only a div content on the page. It works in IE6 an Firefox but not in IE8. IE8 prints the actual page instead of just the "printable" class content. Possibly I have a the same issue in IE7 but I haven't tested it yet. Is there any solution which would make the print code below work in IE8 and/or IE7?

The page link: http://www.bennadel.com/blog/1591-Ask-Ben-Print-Part-Of-A-Web-Page-With-jQuery.htm

The code slightly modified below to also import print style sheet for formatting.

Blog Entry: Ask Ben: Print Part Of A Web Page With jQuery
Author: Ben Nadel / Kinky Solutions
Link: http://www.bennadel.com/index.cfm?dax=blog:1591.view
Date Posted: May 21, 2009 at 9:10 PM

// Create a jquery plugin that prints the given element.

jQuery.fn.print = function(){
// NOTE: We are trimming the jQuery collection down to the
// first element in the collection.
if (this.size() > 1){
    this.eq( 0 ).print();
    return;
} else if (!this.size()){
    return;
}

// ASSERT: At this point, we know that the current jQuery
// collection (as defined by THIS), contains only one
// printable element.

// Create a random name for the print frame.
var strFrameName = ("printer-" + (new Date()).getTime());

// Create an iFrame with the new name.
var jFrame = $( "<iframe name='" + strFrameName + "'>" );

// Hide the frame (sort of) and attach to the body.
jFrame
    .css( "width", "1px" )
    .css( "height", "1px" )
    .css( "position", "absolute" )
    .css( "left", "-9999px" )
    .appendTo( $( "body:first" ) )
;

// Get a FRAMES reference to the new frame.
var objFrame = window.frames[ strFrameName ];

// Get a reference to the DOM in the new frame.
var objDoc = objFrame.document;

// Grab all the style tags and copy to the new
// document so that we capture look and feel of
// the current document.

// Create a temp document DIV to hold the style tags.
// This is the only way I could find to get the style
// tags into IE.
var jStyleDiv = $( "<div>" ).append(
    $( "style" ).clone()
    );

// Write the HTML for the document. In this, we will
// write out the HTML of the current element.
objDoc.open();
objDoc.write( "<!DOCTYPE htm开发者_Go百科l PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">" );
objDoc.write( "<html>" );
objDoc.write( "<body>" );
objDoc.write( "<head>" );
objDoc.write( "<title>" );
objDoc.write( document.title );
objDoc.write( "</title>" );
objDoc.write( jStyleDiv.html() );
// importing printable style sheet
objDoc.write( "<style type=\"text/css\"> @import url(\"./styles/Quiz_print.css\") </style>");
objDoc.write( "</head>" );
objDoc.write( this.html() );
objDoc.write( "</body>" );
objDoc.write( "</html>" );
objDoc.close();

// Print the document.
objFrame.focus();
objFrame.print();

// Have the frame remove itself in about a minute so that
// we don't build up too many of these frames.
setTimeout(
    function(){
        jFrame.remove();
    },
    (60 * 1000)
    );
}

I had the same problem. The content of iframe doesn't get loaded as fast as print command starts, which cause IE sees it as null document, and switches to printing the parent document.

Check this topic: Printing contents of a dynamically created iframe from parent window

In summary, instead of

objFrame.focus();
objFrame.print();

use

jQuery("[name="+strFrameName+"]").load( 
        function() {
            window.frames[strFrameName].focus();
            window.frames[strFrameName].print();
        }
     );

Hope this works for you as it worked for me.