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

问题描述

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

I have implemented Google Picker in my website using javascript. But Whenever a button to initialize picker is pressed, it gets blocked by browser.

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

I have searched and tried few solutions here like:

1. 添加 client.js 而不是 api.js


2. 设置'立即'=假;

1. Adding client.js instead of api.js
2. Setting 'immediate' = false;

But they are not working for me. Please help !

推荐答案

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

I have found a solution for this, if the popup is fired from click event then browsers will not block it, so the main idea is to initiate once and afterward trigger the picker creation directly by the click event.

为此，您可以按照以下步骤操作：

To achieve this you can follow these steps:

1. 使用客户端而不是 auth2


2. 初始化客户端


3. onckick 事件必须触发 gapi.auth2.getAuthInstance（）。signIn（）一次，之后必须触发 google.picker.PickerBuilder（）

1. Use client instead of auth2
2. Initialize client
3. onckick event must trigger the gapi.auth2.getAuthInstance().signIn() once, afterward it must trigger google.picker.PickerBuilder()

或者：

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

这篇关于防止谷歌选择器弹出窗口被浏览器阻止的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！