javascript - Facebook 弹出窗口在 iOS Safari、HTML5 Canvas 按钮上被阻止

Question

我在基于 Phaser 的 HTML5 游戏中使用 JS SDK 进行 facebook 登录。它在 Android 设备上运行良好，通过打开一个弹出窗口通过 facebook 登录。但它不适用于 safari/iOS 设备。我认为弹出窗口被阻止是因为它是通过点击游戏内的按钮生成的，而不是传统 HTML 按钮的原因。

this.fbBtn = this.game.add.sprite(0, 0, 'sheet', 'Button-Facebook', this.loginGrp);

this.fbBtn.inputEnabled = true;
this.fbBtn.events.onInputDown.add(this.onFBLogin, this);


onFBLogin() {
    FB.login(function(response) {
        if (response.status === "connected") {
            FB.api('/me?fields=name,email,first_name', function(response) {

            }
        }.bind(this), {scope: 'email'});
    }
}

Android 上的 Facebook 登录会在弹出窗口中打开，iOS 上则没有任何反应。

Answer 1

该问题已得到解决:

• > https://github.com/photonstorm/phaser/issues/4106
• > http://www.html5gamedevs.com/topic/40114-popup-blocked-windowopen-in-pointerdown-handler/
• > https://phaser.io/download/release/3.10.0

The InputManager and InputPlugin have three new methods: addUpCallback, addDownCallback and addMoveCallback. These methods allow you to add callbacks to be invoked whenever native DOM mouse or touch events are received. Callbacks passed to this method are invoked immediately when the DOM event happens, within the scope of the DOM event handler. Therefore, they are considered as 'native' from the perspective of the browser. This means they can be used for tasks such as opening new browser windows, or anything which explicitly requires user input to activate.