Popup blocker and PointerDown / PointerClick

Hello chloridrik.

If you want to avoid window.open() popup block, the call should be performed from a user-initiated JavaScript event handler. The difficulty here is that in Unity WebGL input events are not processed directly but instead are passed through an intermediate queue. This means that the initial JavaScript event handler initiated by the user has been already processed by the time when you receive the OnClick event in the managed code.

Nevertheless, there is a trick that we can perform to make it work: as soon as the user pushes the UI button down, we can register an onclick JavaScript event for the whole WebGL canvas, so that when the user releases the button, we will get a user-initiated onclick JavaScript event and use it's handler to open the popup.

You will need the following Assets/Plugins/PopupOpener.jslib plugin:

Code (JavaScript):

1. var PopupOpenerPlugin = {
2.   PopupOpenerCaptureClick: function() {
3.     var OpenPopup = function() {
4.       window.open('http://unity3d.com', null, 'width=500,height=500');
5.       document.getElementById('canvas').removeEventListener('click', OpenPopup);
6.     };
7.     document.getElementById('canvas').addEventListener('click', OpenPopup, false);
8.   }
9. };
10. mergeInto(LibraryManager.library, PopupOpenerPlugin);

and the following script to interact with it:

Code (CSharp):

1. using UnityEngine;
2. using System.Collections;
3. using System.Runtime.InteropServices;
4.  
5. public class CanvasScript : MonoBehaviour {
6.     [DllImport("__Internal")]
7.     private static extern void PopupOpenerCaptureClick();
8.  
9.     public void OnButtonPointerDown () {
10.         PopupOpenerCaptureClick ();
11.     }
12. }
13.  

The OnButtonPointerDown should be triggered by the Pointer Down event (available through the Event Trigger component, that you can attach to your UI button).

Now your popup should open normally.

 

Yes, using html button is also a solution.
Nevertheless, using a native Unity UI button has its advantages, as it is a part of the scene and can be easily hidden/displayed/moved directly from the managed code. All you have to do is to add a simple jslib plugin that will handle the click event. Common use cases that you can handle with the helper plugin: open popup, go fullscreen, open file from local drive, save file to local drive.

 

Hello nicos445.

The window.open() should be executed from inside the JavaScript event handler in order to not be limited by the browser security policy. Your setup can not work, because normal UI button click will go through the intermediate input queue and will be executed after the actual event handler.

Let me explain how the trick above works:

- You attach OnButtonPointerDown() to the Pointer Down event (available through the Event Trigger component, that you can attach to your UI button). And then from this OnButtonPointerDown() you call the JavaScript function PopupOpenerCaptureClick() which attaches onclick event listener to the whole canvas. All this happens when the user presses the mouse button down.

- So, while the mouse button is still down, we have already registered a pure JavaScript onclick event handler OpenPopup() for the canvas which will be executed as soon as the user releases the button somewhere over the canvas (you can alternatively register the onclick event handler for the whole document instead, then it will be triggered if user releases the mouse button somewhere over the page). Note that this has nothing to do with the Unity scripts anymore, because this is a pure JavaScript event handler. Note that JavaScript does not have any concept of the UI buttons and does not know where the original UI button was located, the event will be triggered as soon as the user releases the mouse button somewhere over the canvas (no matter over the original UI button or not).

- When user releases the mouse button, our JavaScript function OpenPopup() is executed, and as it has been triggered directly by the user action as a JavaScript event handler, you are not limited by the browser security policy during its call. So you can execute for example window.open() without it being blocked. If you have a managed function FBlogin which performs login, then you may call it using SendMessage() from the OpenPopup(). Note that managed FBlogin will only work well if it is synchronous (i.e. FBlogin performs all the necessary processing including the window popup before return), then all the security related actions will be succefully performed inside the onclick event handler.

- After running all the necessary code, OpenPopup() should now remove the onclick event listener (otherwise it would be triggered each time when user releases the mouse over the canvas in the future).

If you have any difficulty making it work, post your exact code here (including the JavaScript plugins).