CODEWITHSUNDEEP
javascriptjqueryonloadwindow-object
soba3
soba3

Reputation: 389

Javascript .onload not firing in IE? window.open reference issue?

I haven't been able to make sense of the answers to related questions so far(down to my knowledge level), so...

I have a simple script(using jQuery) that opens a new window and adds certain content from the parent into a specified container inside the child. I'm not sure if it's my approach that's wrong or I'm just missing a step - the script to run on the new window runs in IE when it's outside of the window.onload function, but this breaks FF, and FF is happy when it's inside of the window.onload, but then the new window in IE doesn't appear to be doing anything(no alert, no add of content, nada).

Please can anybody explain to me why this is the case/what I'm doing wrong? Is it something to do with the reference to window.open?

This is the script:

var printPage = function(container){

    $('.printButton').click(function(){

        var printWindow = window.open('printWindow.html');  

        var contentFromParent = $(container).eq(0).html();   

        /*works for IE, but not FF
        printWindow.alert('works for IE, but not FF');  
        printWindow.document.getElementById('wrap').innerHTML = contentFromParent;*/

        /*works for FF and Chrome but not IE:*/
        printWindow.onload = function(){
            printWindow.alert('works for FF and Chrome but not IE');
            printWindow.document.getElementById('wrap').innerHTML = contentFromParent;          
        }

        /*I also tried:
        $(printWindow.document).ready(function(){
            printWindow.alert('load the page, fill the div');
            printWindow.document.getElementById('wrap').innerHTML = contentFromParent;
        }); //works for IE, not working for FF/Chrome*/
    })  
}
printPage('#printableDiv');

The HTML:

<div id="wrap">
    <button href="#" class="printButton">Print</button>
    <div id="printableDiv"> 
        <p>I want to see this content in my new window please</p>
    </div>
</div>

UPDATE Thanks for your pointers about onload in the new window - I've gone with this solution for now: Setting OnLoad event for newly opened window in IE6 - simply checking the DOM and delaying the onload - working for IE7/8/9.

I'm not sure if you'd call it an 'elegant' solution, but it's working! Further comments, especially if you think this is flawed, would be appreciated. Thanks.

var newWinBody;
function ieLoaded(){
    newWinBody = printWindow.document.getElementsByTagName('body');
    if (newWinBody[0]==null){
        //page not yet ready
        setTimeout(ieLoaded, 10);
    } else {
        printWindow.onload = function(){
            printWindow.alert('now working for all?');
            printWindow.document.getElementById('wrap').innerHTML = contentFromParent;          
        }
    }
}
IEloaded();

Upvotes: 3

Views: 4465

Answers (1)

Sergey
Sergey

Reputation: 31

Can it be that the page you open fires the 'onload' event before you set the event handler printWindow.onload = ... ?

You might consider including some javascript in your 'printWindow.html' page. Let's say you add a short <script>var printWindowLoaded = true;</script> at the end of your page. Then your main script would do something like this:

function doStuff() {
        //...          
    }

if (printWindow.printWindowLoaded)
    doStuff();
else
    printWindow.onload = doStuff;

Upvotes: 3

Related Questions