addEventListener does not work in IE 11

Question

I am using javascript to open a popup and execute some code once it is loaded.

This is the code:

// Öffnen des Print Popups binden.
$('#revi_print').unbind();
$('#revi_print').click(function() {

    // Popup erstellen.
    popup = window.open('report_handle/print.php?filter_report=' + $('#revi').data('filter_report'), "Popup", "width=1024, height=768, scrollbars=yes, toolbar=no, status=no, resizable=yes, menubar=no, location=no, directories=no, top=10, left=10");

    // Code erst ausführen, wenn das Popup geladen ist.
    popup.addEventListener('load', handle_popup, false);
});

It does work fine in Firefox and Google Chrome, however I have realized, that it does not work in the newest Internet Explorer.

From what I have read, addEventListener should be supported above IE9, so theoretically IE 11 should support it - however it seems this is not the case.

---

This error indicates, that IE11 is not supporting the method...

---

Is there a simple workaround to make this work?

---

I have just tried this pice of code:

if (popup.addEventListener){
    alert("firefox, chorome, etc");
    popup.addEventListener('load', handle_popup, false); 
} else if (popup.attachEvent){
    alert("IE");
    popup.attachEvent('load', handle_popup);
}   

Apparently this should work according to different other threads, but it is not the case. The browser does go to the else if, when IE is used - however it still refuses to work.

Could it be, that attachEvent in IE does not work on popups?

---

I have just tried the method indicated in the first answer.

It works in firefox and chrome, but IE refuses to work, even tough this method does not have the EventListener any more:

// Öffnen des Print Popups binden.
$('#revi_print').unbind();
$('#revi_print').click(function() {

    // Popup erstellen.
    popup = window.open('report_handle/print.php?filter_report=' + $('#revi').data('filter_report'), "Popup", "width=1024, height=768, scrollbars=yes, toolbar=no, status=no, resizable=yes, menubar=no, location=no, directories=no, top=10, left=10");

    // Code erst ausführen, wenn das Popup geladen ist.
    //popup.addEventListener('load', handle_popup, true);

    popup.window.onload=function() { parent.handle_popup(popup); }
});

// Code zum handeln des Popups.
function handle_popup(popup) {
    var selected_report = $('#revi').data('filter_report');
    var jqplot_object = $('#revi_filter_ddReport_' + selected_report + '_jqplot_object').html();
    var has_chart = $('#revi_filter_ddReport_' + selected_report + '_has_chart').html();
    var obj = $.parseJSON($('#revi').data('data').trim());

    // Den Kontent kopieren.
    popup.$('#revi_sec_report_container').html($('#revi_report_container').html());

    // Den Print Button entfernen.
    popup.$('#revi_print').remove();

    // Das chart entfernen.
    popup.$('#revi_chart').empty();

    // Wenn ein Chart gezeichnet werden soll.
    if (has_chart == 1) { 
        var execute_string = $.base64.decode(jqplot_object);
        eval(execute_string); 
    }
}

---

Next attempt (half successful):

I have added this line of code to the HTML of the POPUP:

This are the changes on the javascript side:

// Öffnen des Print Popups binden.
$('#revi_print').unbind();
$('#revi_print').click(function() {

    // Popup erstellen.
    popup = window.open('report_handle/print.php?filter_report=' + $('#revi').data('filter_report'), "Popup", "width=1024, height=768, scrollbars=yes, toolbar=no, status=no, resizable=yes, menubar=no, location=no, directories=no, top=10, left=10");

    $('body').data('the_popup', popup);

    // Code erst ausführen, wenn das Popup geladen ist.
    //popup.addEventListener('load', handle_popup, true);

    //window.onload=function() { handle_popup(popup); }
});

// Code zum handeln des Popups.
function handle_popup() {

    var popup = $('body').data('the_popup');

    var selected_report = $('#revi').data('filter_report');
    var jqplot_object = $('#revi_filter_ddReport_' + selected_report + '_jqplot_object').html();
    var has_chart = $('#revi_filter_ddReport_' + selected_report + '_has_chart').html();
    var obj = $.parseJSON($('#revi').data('data').trim());

    // Den Kontent kopieren.
    popup.$('#revi_sec_report_container').html($('#revi_report_container').html());

    // Den Print Button entfernen.
    popup.$('#revi_print').remove();

    // Das chart entfernen.
    popup.$('#revi_chart').empty();

    // Wenn ein Chart gezeichnet werden soll.
    if (has_chart == 1) { 
        var execute_string = $.base64.decode(jqplot_object);
        eval(execute_string); 
    }
}

On firefox and Chrome it works perfectly, the popup opens, and the chart that should be drawn on the popup shows up.

Now IE also executes the code for the popup, which is very good, but now only for IE JQPLOT does throw an error somewhere in the library.

I have no clue why this happens, I can only guess that the popup is not jet finished loading, when the code for jqplot is executed.

---

Got everything working now - the jqplot thing is fixed now...

Solution 1

Sounds like a dupe of Detecting the onload event of a window opened with window.open

but I could not see a specific answer of your question in it.

But why not do

window.onload=function() { opener.handle_popup() } // or attachEventListener

in the child window? Not need for attach events that may never be triggered because your attaching may be after the load triggered

TRY IT

Tested and working (after allowing popups) in Chrome Edge, IE11 and FX

Solution 2

As explained in "https://github.com/angular/zone.js/issues/535", another reason sometimes is that IE takes time to return the window object returned by window.open. As a result by the time your addEventlistener code executes, the object doesn't have this function. The workaround I used was:

popup = window.open('report_handle/print.php?filter_report=' + $('#revi').data('filter_report'), "Popup", "width=1024, height=768, scrollbars=yes, toolbar=no, status=no, resizable=yes, menubar=no, location=no, directories=no, top=10, left=10");
var interval = setInterval(function(){
   if(typeof popup.addEventListener === "function"){
   clearInterval(interval);
    popup.addEventListener('load', handle_popup, false);
   }
},100);

Comments

[Andreas]

Hi, I have tried this and it does work in firefox and chrome but not in IE - see the code in my original question.

[Andreas]

The IE does not generate a warning or error message any more by using your method, it simply does not do it.

[Andreas]

window.onload=function() { parent.handle_popup(popup); } does not work - not even in firefox or chrome... On the popup there is no javascript, the popup is only a pretty naked HTML page. All javascript has to be executed on the parent window once the popup has loaded. All code I have posted exists on the parent page not at the popup.

[mplungjan]

Sorry - OPENER, not PARENT. See update: plungjan.name/SO/testpopup/parent.html

[Andreas]

In firefox and chrome it works perfectly. In IE it works also, but for some reason I do not understand, IE does not want to draw the chart by using this method - jqplot throws an exception...

[Andreas]

I will describe it more complete in my original question.

[Rich]

@mplungjan Do you still have this example online somewhere? I got a 404 on the page you linked to.

[mplungjan]

@Rich it's there now

[Rich]

@mplungjan Thanks!