Thursday, May 5, 2011

Printing contents of a dynamically created iframe from parent window

Hi, I have a page with a list of links and a div which serves as a placeholder for the pages the links lead to. Everytime user clicks on a link an iframe is created in the div and its src attribute gets the value of the link href attribute - simple and clear, sort of external web pages gallery. What i do have a problem with is printing the contents of the iframe. To do this i use this code:

function PrintIframe()  
{  
frames["name"].focus();  
frames["name"].print();  
}

The issue seems to be that iframe is created dynamically by JQuery - when I insert an iframe right into the html code, the browser prints the external page all right. But with the same code injected by JavaScript nothing happens. I tried to use JQ 1.3 'live' event on "Print" link, no success. Is there a way to overcome this?

From stackoverflow
  • Hmm do I get this right? You only need to change the source of where the IFrame leads to?

    $("#iframe").attr("src", "http://www.example.com");
    
    certainlyakey : no, the problem is that i cannot print the page in the iframe - there're 2 options: 1) it's possible to print it like a part of the page (with PrintArea plugin) - but then it prints only one page and the content of the iframed page is not formatted on the paper as it should be. 2)it's possible to print it as a normal page but ONLY if iframe tag is not inserted dynamically, via JS but statically presents in HTML.
  • Maybe the same-domain restriction prevents your JavaScript from executing. The same-domain restriction allows JavaScript in frame A (or the main window) to interact (such as .print()) with frame B if A and B are from the same domain. Check your JavaScript error console. If you get something like a security exception / permission error, then it is most probably because of the same-domain restriction.

    certainlyakey : No, i've got no such errors in Firebug... And yes, the pages are all from the same domain.
  • I tried this and was able to replicate the issue. What i noticed was that when calling the print function the iframe hadn't completed loaded. i tested this by checking the value of innerHTML when calling PrintIFrame(). To overcome this, you can use setTimeOut to call the function again x milliseconds later:

    function PrintIframe() { 
    
            if (window.frames['myname'].innerHTML != "") {
                window.frames['myname'].focus();
                window.frames['myname'].print();
            } else {
                setTimeout(PrintIframe,1000);
            }    
        }
    

    This worked for me

    EDIT Strange - i had an alert in my test code which seems to make it work. When i took it out, it didn't work. Sorry :(

    Anyway, this should do it using jQuery to attach a load event handler to the iframe. I have tested on IE8 and it works:

    <html>
    <head>
        <script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
        <script type="text/javascript">
        function loadiFrame(src)
        {
            $("#iframeplaceholder").html("<iframe id='myiframe' name='myname' src='" + src + "' />");
        }
    
        $(function()
        {
            $("#printbutton").bind("click", 
                function() { 
                    loadiFrame('test.aspx'); 
                    $("#myiframe").load( 
                        function() {
                            window.frames['myname'].focus();
                            window.frames['myname'].print();
                        }
                     );
                }
            );
        });
        </script>    
    </head>
    <body>
        <input type="button" id="printbutton" value="Load iFrame" />
        <div id="iframeplaceholder"></div>
    </body>
    </html>
    
    certainlyakey : Not for me:( Again, it's OK with html but it does not print an iframe if it was created by JQ itself.
    certainlyakey : Well your last elaboration did work out for me on the test page, should investigate further...
  • I created a simple test page to illustrate (it's much simpler in JS code than my working project), and printing "dynamic" iframe there works, but strangely only once. http://forensicsciences.ru/!newsite/html/example.html

0 comments:

Post a Comment