javascript - 防止 Google 选择器弹出窗口被浏览器阻止

Question

我在我的网站上使用 javascript 实现了 Google Picker。但是每当按下初始化选择器的按钮时，它就会被浏览器阻止。

我在这里搜索并尝试了一些解决方案，例如:

1. 添加 client.js 而不是 api.js
2. 设置 'immediate' = false;

但他们对我不起作用。请帮忙 !

Answer 1

我已经找到了一个解决方案，如果弹出窗口是从点击事件中触发的，那么浏览器就不会阻止它，所以主要的想法是启动一次，然后通过点击事件直接触发选择器的创建。

要实现这一点，您可以按照以下步骤操作:

1. 使用client代替auth2
2. 初始化客户端
3. onckick 事件必须触发一次 gapi.auth2.getAuthInstance().signIn()，之后它必须触发 google.picker.PickerBuilder()

For more information you can see my GooglePicker wrapper class - gist

或者:

    var GoogleAuth;
    var oathToken;
    gapi.load('client', function () {
    gapi.client.init({client_id: "MY_CLIENT_ID", scope: "MY_SCOPE"}).then(function () {
        GoogleAuth = gapi.auth2.getAuthInstance();
        });
    });


    function pick() {
        if (!oathToken) {
            GoogleAuth.signIn().then(function () {
                const user = this.GoogleAuth.currentUser.get();
                oathToken = user.getAuthResponse().access_token;
            });
        } else {
            const picker = new google.picker.PickerBuilder()
                .addView(google.picker.ViewId.DOCS)
                .setOAuthToken(oathToken)
                .setDeveloperKey("MY_DEVELOPER_KEY")
                .setCallback((data) => myCallBack(data)).build();

            picker.setVisible(true)
            }
    }

    function myCallBack(data) {
        if (data[google.picker.Response.ACTION] === google.picker.Action.PICKED) {
            const docs = data[google.picker.Response.DOCUMENTS];
            const url = docs[0][google.picker.Document.URL];
            const name = docs[0][google.picker.Document.NAME];

            console.log("Picked file's name: ", name);
            console.log("Picked file's url: ", url);
            // etc...
        }
    }