Popup blocker and PointerDown / PointerClick

Unity Engine
1

Hi,

I’m using the facebook sdk for my webgl app, and I have tried PointerDown or PointerClick event for the facebook login, but for each event Chrome block the popup.

What is the best way to open popup in webgl export ?

thx.
Jeremie.

2

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:

var PopupOpenerPlugin = {
  PopupOpenerCaptureClick: function() {
    var OpenPopup = function() {
      window.open('http://unity3d.com', null, 'width=500,height=500');
      document.getElementById('canvas').removeEventListener('click', OpenPopup);
    };
    document.getElementById('canvas').addEventListener('click', OpenPopup, false);
  }
};
mergeInto(LibraryManager.library, PopupOpenerPlugin);

and the following script to interact with it:

using UnityEngine;
using System.Collections;
using System.Runtime.InteropServices;

public class CanvasScript : MonoBehaviour {
    [DllImport("__Internal")]
    private static extern void PopupOpenerCaptureClick();

    public void OnButtonPointerDown () {
        PopupOpenerCaptureClick ();
    }
}

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.

2 Likes
3

Thank you Alex,

Finaly I have added a div with a facebook connect button (with javascript SDK) over the canvas and I send the access_token and userid to UnitySDK and it work well.

best regards,
Jeremie

4

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.

5

Hi Alex,
I tried your solution with the UI button and what I’ve got is the unity3d.com popup and chrome blocking the FBlogin popup…
I’ve attached the PopupOpenerCaptureClick () to OnButtonPointerDown of the UI button and FBlogin as a normal response of the button click.
Did I use your code wrong?

6

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).

7

Hi Alex,

I’d like to achieve the same and have been following this thread.

FB.LogInWithReadPermission() which is part of the Facebook Unity SDK is asynchronous. So I see the popup appearing and then vanishing… so despite using your fix I still have the same problem as without the fix ( I understand it’s because the login fb function is non-blocking). All I need by the way is the email address of the user.

Any help or advice would be much appreciated! Thanks a lot.

8

I have found a solution for this, you have to build a custom version of FB SDK yourself or grab my fork. Hope this help.

2 Likes
9

Hey @anngo , Im not sure how to implement your fix for the Facebook SDK in my Unity Project. Sent you a PM

10

@alexsuvorov that’s a brilliant explanation of how the click event works. But you never actually explain how to capture the information from the facebook login popup window and return it to Unity to the Facebook SDK. Nor do you show how to close the pop-up again once it’s all done.

Would you mind please shedding some light on this?

1 Like
11

Hello,
even with your example used as you wrote it, I get an EntryPointNotFoundException.
Did something changed within the use of DLLImport meantime?

1 Like
12

I’m in the same situation with facebook login popup. Someone can explain how to solve ?

13

Hello @alexsuvorov and thank you so much for help.
Though I’m sorry, I can’t manage using your codes. I’m really a newb on developpement could you explain how to use them on a 3D collider instead of a UI button ?

14
  • Hi Nicos,
  • I am not able to find the canvas when i attach the same script in my.jslib function .
  • Please explain a appropriate solution for the same.
  • document.getElementById(‘canvas’).removeEventListener(‘click’, OpenPopup);
15

Hi Rahul

Have you tried using (‘#canvas’)? If you look in the dev tools of your browser, you can see in the ‘Elements’ tab that the newer versions of Unity uses a new id.

16

I just tryed alexsuvorov’s example and it work fine on desktop, but on mobile not.
There is sadly no error or anything… just doesnt work.
Any idea how to get this to work on mobile?

My goal is open a new tab from my webgl app without triggering the popup blocker.

Thanks!

17

@Romano360 i was struggling with the same thing and managed to make it work on mobiles too! use the method here Opening links in a Unity WebGL project and add ontouchend to the jslib file should look like this…

var OpenWindowPlugin = {
    openWindow: function(link)
    {
        var url = Pointer_stringify(link);
        document.onmouseup = function()
        {
            window.open("YOUR.URL.COM");
            document.onmouseup = null;
        }
        var url = Pointer_stringify(link);
        document.ontouchend = function()
        {
            window.open("YOUR.URL.COM");
            document.ontouchend = null;
        }
    }
};

mergeInto(LibraryManager.library, OpenWindowPlugin);

replace “YOUR.URL.COM” with the url you want to access and its done :wink:

always a pleasure :slight_smile:

1 Like
18

also on a side note you can use this on any game object by not using event handler but put this code on any gameobject which basically gets the script component called “Link” and executes OpenLinkJsPlugin onmousedown instead…

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class mousedown : MonoBehaviour{
public GameObject box;
    void OnMouseDown(){
        box.GetComponent<Link>().OpenLinkJSPlugin();

    }
}
19

@alexsuvorov this trick does not work on Unity 2020.1 beta. I still get the message “Failed to execute ‘requestFullscreen’ on ‘Element’: API can only be initiated by a user gesture.”