Sending a message to the parent window of the browser through a callback function in Internet Explorer version 11.0.x

Question

Sending a message to the parent window of the browser through a callback function in Internet Explorer version 11.0.x

Currently, I am working on developing a callback in my application that is responsible for opening a popup, executing some tasks, and then responding to the popup's opener window to indicate that the action has been completed.

In order to communicate with the opener window, the popup utilizes the window.opener.postmessage() method within the browser.

While this functionality is functioning properly in most browsers, there seems to be an issue with Internet Explorer 11.0.x as it is unable to successfully post the message. Surprisingly, version 11.192.x is able to communicate effectively. I have not yet tested this with IE 9/10.

The specific error encountered is a Permission Denied message, and the window.opener property is returning as undefined. I am looking for a solution to address this challenge and enable my popup to send messages to the opener window in Internet Explorer 11.0.x.

Any assistance would be greatly appreciated. Thank you!

javascript internet-explorer popup payment-gateway razorpay

Answer 1

Answer №1

I have not yet experimented with this method on Internet Explorer, but I would appreciate it if you could provide feedback on whether it works for you or not.

To begin, create an empty object within the window object to store your data.

For example:

window._myData = {};

Next, define a function on the window object that will execute the desired actions, set the data, and be called when the new window is closed.

For instance:


window._popupClosing = function(data){ 
    this._myData = data;
    console.log('Done....', this._myData); 
};

Open the popup window.

For example:

var w = window.open('https://google.com','_blank');

Set a timer to monitor whether the window has been closed. Then, execute your function.

For example:


var timer = setInterval(function(){
    if(w.closed){
        clearInterval(timer);
        window.parent._popupClosing(window.location.href);
    }
}, 1000);

Do not forget to close the new popup using a script within the popup itself by using

window.close();

Putting it All Together


window._myData = {};
window._popupClosing = function(data){
    this._myData = data;
    console.log('Done....', this._myData);
};
var w = window.open('https://google.com','_blank');
var timer = setInterval(function(){
    if(w.closed){
      clearInterval(timer);
      window.parent._popupClosing(window.location.href);
    }
  }, 1000);

Always remember to close the new popup once you have finished. window.close();

If it is possible to send your data to an endpoint and then retrieve it within your popup close function, that would be a more efficient approach compared to transferring data between windows. Just a thought.

Answer 2

I have not yet experimented with this method on Internet Explorer, but I would appreciate it if you could provide feedback on whether it works for you or not.

To begin, create an empty object within the window object to store your data.

For example:

window._myData = {};

Next, define a function on the window object that will execute the desired actions, set the data, and be called when the new window is closed.

For instance:


window._popupClosing = function(data){ 
    this._myData = data;
    console.log('Done....', this._myData); 
};

Open the popup window.

For example:

var w = window.open('https://google.com','_blank');

Set a timer to monitor whether the window has been closed. Then, execute your function.

For example:


var timer = setInterval(function(){
    if(w.closed){
        clearInterval(timer);
        window.parent._popupClosing(window.location.href);
    }
}, 1000);

Do not forget to close the new popup using a script within the popup itself by using

window.close();

Putting it All Together


window._myData = {};
window._popupClosing = function(data){
    this._myData = data;
    console.log('Done....', this._myData);
};
var w = window.open('https://google.com','_blank');
var timer = setInterval(function(){
    if(w.closed){
      clearInterval(timer);
      window.parent._popupClosing(window.location.href);
    }
  }, 1000);

Always remember to close the new popup once you have finished. window.close();

If it is possible to send your data to an endpoint and then retrieve it within your popup close function, that would be a more efficient approach compared to transferring data between windows. Just a thought.

Sending a message to the parent window of the browser through a callback function in Internet Explorer version 11.0.x

Answer №1

Putting it All Together

Similar questions

PHP is unable to retrieve the formData object sent via ajax

What is the best way to showcase the contents of an array of objects from JavaScript on an HTML page in a dynamic

Problems with Vuex getter reactivity when used in conjunction with Vue router

Setting up D3 on a Meteor Angular2 project

Creating a Timeless Banner with the Magic of `background:url()`

Obtain JSON data from an API and display it in a table using axios and Vue.js

JavaScript sorted arrays are an efficient way to keep data

The datepicker is refusing to update the date format

Switch between light and dark modes with the MUI theme toggle in the header (AppBar)

Asynchronous requests in Node.js within an Array.forEach loop not finishing execution prior to writing a JSON file

Track and monitor data modifications in Vue.js

"Enhance the visualization of your data with Apexcharts by accurately coloring the columns

The height of the browser action will not return to its original state

Creating a basic image carousel with JavaScript, CSS, and HTML

Combining Json, Jquery Autocomplete, and PHP to customize the displayed search options based on multiple items within the Json data

The ng-click event is not triggering the Controller Function as expected

Eslint was unexpectedly unable to detect any errors in the .ts files

KendoGrid encountered a JavaScript runtime error due to an invalid template

Struggling to understand JSON in joint.js?

set ajax url dynamically according to the selected option value