Question

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

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

添加client.js代替api.js
设置'immediate' = false;

但他们不适合我。请帮忙！

Answer 1

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

要实现此目的，您可以按照以下步骤操作：

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

article

或者：

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

防止谷歌选择器弹出窗口被浏览器阻止

1 个答案: