[Webkit-unassigned] [Bug 200261] New: iframe printing works in desktop Safari, but not mobile...

Mon Jul 29 17:56:47 PDT 2019

https://bugs.webkit.org/show_bug.cgi?id=200261

            Bug ID: 200261
           Summary: iframe printing works in desktop Safari, but not
                    mobile...
           Product: WebKit
           Version: Safari 12
          Hardware: iPhone / iPad
                OS: Unspecified
            Status: NEW
          Severity: Major
          Priority: P2
         Component: Printing
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: l.mazz at verizon.net

Created attachment 375132

  --> https://bugs.webkit.org/attachment.cgi?id=375132&action=review

Instructions to replicate this bad behavior

Once again, I've hit a wall with iOS printing after getting desktop Safari to work.
The overall approach:
    - load some css in <head>
    - load some HTML in <body>
    - call contentWindow.print()

Here's the code:

            //"Print" search results on item list (inventory) page
            //        SAFARI VERSION DEPENDENT - assumes "sVersion" has correct Safari version
            $('#itemList .toolbar .printButton').live('click', function(event) {
                // Expand any telescoped items
//                $('#itemList #resultsBody ul li[id^="t"]').each(function() {
//                    alert("opening "+ $(this).attr("id") );
//                   $(this).find('.tsIcon').trigger('click');
//                });

                if (sVersion > "5.0.6")
                    if ($('iframe').html() != null) $('iframe').remove();       // newer Safaris require this done here

                var iframe = document.createElement("iframe");                  // create an iframe so that no window pops up
                document.body.appendChild(iframe);                              // insert the element to the DOM

                // include a stylesheet for printing this stuff
                headHTML  = "<link rel='stylesheet' href='css/rPrint.css'>";

                var frame = $('iFrame #document');
                var contents = frame.contents();
                var body = contents.find('body');
                var head = contents.find('head');

                iframe.contentDocument.open();
                iframe.contentDocument.write(headHTML);                         // write stylesheet link
                iframe.contentDocument.write(vendorName);                       // write header
                today = new Date();
                dd = String(today.getDate()).padStart(2, '0');
                mm = String(today.getMonth() + 1).padStart(2, '0'); //January is 0!
                yyyy = today.getFullYear();
                today = mm + '/' + dd + '/' + yyyy;
                iframe.contentDocument.write(" - "+today);
                iframe.contentDocument.write("<span class='tm'>Made with <i>ShipIt</i>™</span><br>");
                iframe.contentDocument.write(vuName+', '+vuPhone+"<br>");
                if (vuEmail != "(none)")
                    iframe.contentDocument.write(vuEmail+"<br>");

                // Only display checked items
                $('#itemListStatus #resultsBody ul li input:checked').each(function() {
                    $(this).attr("checked", "checked");
                });
                $('#itemListStatus #resultsBody ul li input:not(:checked)').each(function() {
                    $(this).removeAttr("checked");
                });
                var clone = $('#itemListStatus').clone();                       // don't trash the screen
                srCount = $(clone).find('#resultsHead #srCount').text();
                $(clone).find('#resultsBody ul li input:not(:checked)').each(function() {
                    $(this).parent().css("display", "none");
                    srCount--;
                });
                $(clone).find('#resultsHead #srCount').text(srCount);

                iframe.contentDocument.write($(clone).html());                  // write the results HTML to be printed
                iframe.contentDocument.close();

                iframe.contentWindow.print();                                   // print it
                if (sVersion <= "5.0.6")
                    $('iframe').remove();                                       // older Safaris get this done here, where it should be
                return true;
            });

The attachment lets you access the web app to experience correct behavior in desktop Safari, 
and the non-behavior in iOS.  As an aside, Chrome is spotty - sometimes this code will work,
other times you have to repeatedly hit "Print" to get the css rules to be applied.  Clue?

Any help appreciated on this one.

-- 
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-unassigned/attachments/20190730/99b9c54a/attachment-0001.html>