DEV Community

Cover image for Something Cool: Popup Callbacks
Michael Solati
Michael Solati

Posted on • Updated on • Originally published at michaelsolati.com

Something Cool: Popup Callbacks

Problem

Imagine that you need to direct a user to a different web page/domain and would like to know when they've completed whatever it is that you needed them to do.

Background

I'm currently working on a Wordpress plugin which requires OAuth so that I can allow them to do, well, stuff! (I don't think I can disclose that right now...) While I could account for one or two redirect URIs, it would be IMPOSSIBLE for me to handle that for EVERY DOMAIN THAT MY WORDPRESS PLUG IN IS RUNNING ON!!!!

Solution

What I opted to do in the plugin is to open a page that I host when a user clicks on the OAuth button.

const newWindow = window.open('https://somesite.com/oauth', 'oauth', 'height=720,width=480');
Enter fullscreen mode Exit fullscreen mode

As soon as I create the new window I'm able to extend the current window object by adding a function:

window.popUpCallback = (code) => {
    newWindow.close();
    console.log(code);
};
Enter fullscreen mode Exit fullscreen mode

Now on my pop up that will handle the authorization, after it gets the authorization code it can call the function I added to the window:

window.opener.popUpCallback(value);
Enter fullscreen mode Exit fullscreen mode

What happened here is that my popup window will call the popUpCallback function that I added to the window that opened this current (new) window.

Looking back at my popUpCallback function you see that I close the newWindow (the popup) and then console.log the code I got back. However you can do anything you want now. What you've done is passed a value between windows!

For me this was perfect because now I only need to have one redirect URI no matter where this plugin is run, but maybe this will be useful for you for some other reason.

Enjoy!


To keep up with everything I’m doing, follow me on Twitter. If you’re thinking, “Show me the code!” you can find me on GitHub.

Top comments (1)

Collapse
 
diek profile image
diek

Yeah! This tip rocks, i did it a little time ago to communicate an Angular app opened by an old custom CRM.