on('load') does not work for opened popup in internet explorer 11

问题

I do not recall the last time I used popup for anything, but :(

I want to open new window and when it is opened I want to shout "1". Window opens in all browsers, but in IE 11 / Edge it does not alert().

<html>
<head>
<script src="//code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
$(document).ready(function(){
  $('#button').on('click',function(e){
    e.preventDefault();
    var win = window.open ('/test.html')
    $(win).on('load',function(){
      alert ('opened');
    });
  });
});
</script>
</head>
<body>
<a href="#" id="button">button</a>
</body>
</html>

回答1:

The is occurring because IE11 (and presumably Edge) is not returning from the window open call until the window opened has finished loading. The load event handler you add is not called because the event has already fired.

Afterfile: protocol files kept asking for permission to allow blocked content and crashing IE, testing resumed using a localhost node.js/express server.

The result was verified by putting a load event listener in test.html which included code to append "test loaded<br>" to the contents of a DIV element, and putting code in the click handler to append "window opened<br>" to the same DIV, in the page opened, immediately after the window open call.

IE reported "test loaded, window opened" in that order. Firefox threw an error in the opening page that the DIV element used for logging in the opened page did not exist yet (as expected).

It is difficult to suggest a coding solution without knowing what needs to be achieved by the inter-window access and what files you control and can modify. Knowing what the problem is should help!

回答2:

Take out the space after window.open and before the parenthesis so you don't trip up the JS engine. You could be winding up with win holding a copy of the window.open function, not the new window itself.

While it can be a stylistic choice whether or not to put a space before the parenthesis that define a function's argument list as in:

// Either of these will work
function foo (a, b, c) { ...  
function foo(a, b, c) { ...

There should never be a space after a method name and before the parenthesis that group that method's arguments:

obj.foo(x);  // Correct
obj.foo (x); // Incorrect

NOTE: This code won't execute here in the Stack Overflow code snippet area due to sand boxing.

$(document).ready(function(){
  
  // Set the "button" to have a click callback
  $('#button').on('click',function(e){

      // Cancel the native click event of the hyperlink
      e.preventDefault();

      // Open a new window and get a handle to it
      var win = window.open('/test.html');  // <-- No space after "open"

      // Set the new window to have a load event handler
      $(win).on("load", function(e){
        
        // Alert the user
        alert("Yay!");
      });

  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<a href="#" id="button">button</a>

来源：https://stackoverflow.com/questions/41905092/onload-does-not-work-for-opened-popup-in-internet-explorer-11

标签

javascript

jquery

internet-explorer-11

microsoft-edge

window.open