Почему Chrome определяет мою новую вкладку как объявление? - ReactJS - PullRequest
Новая
       88

Почему Chrome определяет мою новую вкладку как объявление? - ReactJS

1 голос
/ 20 марта 2020

У меня, возможно, странный вопрос, но он все же немного раздражает. В нашем интерфейсе мы создали взаимодействие с пользователем, просто нажав кнопку и предварительно просмотрев файл PDF на новой вкладке. Все работает нормально, но если у вас есть расширение Chrome, активированное AdBlocker, оно автоматически сработает и не позволит пользователю просмотреть его документ. Это немного раздражает, потому что мне приходилось отображать большое сообщение для каждого пользователя, чтобы иметь правильно работающее приложение для отключения их расширений AdBlocker. Поэтому я спрашиваю себя, есть ли способ предотвратить этот сценарий? chrome 

  const postHeader = {
        responseType: 'arraybuffer',
        headers: {
            'Content-Type': 'application/json;charset=UTF-8',
            'Access-Control-Allow-Origin': '*',
            'Accept': 'application/pdf',
            'Authorization': 'Bearer ' + token
        }
    };

    // Prepare request to the BE body
    const postBody = {
        customerNumber,
        tenant
    };

    if (!isNaN(pdfID)) {

        // Firing the request to the BE
        axios.post(serverUrl + '/api/user/bill/' + pdfID, postBody, postHeader)

            .then((response) => {
                // If there is blob data with the PDF, we show it
                if (response.data.byteLength > 0) {
                    // We create a file from the blob
                    const file = new Blob([response.data], {
                        type: 'application/pdf'
                    });

                    if (window.navigator && window.navigator.msSaveOrOpenBlob) {
                        window.navigator.msSaveOrOpenBlob(file, "output.pdf");
                    } else {
                        const objectUrl = URL.createObjectURL(file);
                        window.open(objectUrl);
                        console.log(objectUrl)
                    }

1 Ответ

2 голосов
/ 20 марта 2020

Обычная стратегия блокировки всплывающих окон в браузерах заключается в том, что любое новое окно или вкладка должны открываться как прямой результат взаимодействия с пользователем. Поскольку ваш обработчик событий щелчка инициирует асинхронный процесс, и вы не открываете новое окно до тех пор, пока оно не разрешится, это означает, что браузер заблокирует его, потому что между взаимодействием пользователя и window.open().

* прошло слишком много времени. 1003 * Самый простой способ исправить это - просто открыть окно перед тем, как вы начнете читать данные, а затем записать его, как только вы будете готовы. Примерно так должно работать: 
if (!isNaN(pdfID)) {

    const pdfWindow = window.open('about:blank');

    // Firing the request to the BE
    axios.post(serverUrl + '/api/user/bill/' + pdfID, postBody, postHeader)

        .then((response) => {
            // If there is blob data with the PDF, we show it
            if (response.data.byteLength > 0) {
                // We create a file from the blob
                const file = new Blob([response.data], {
                    type: 'application/pdf'
                });

                const objectUrl = URL.createObjectURL(file);

                pdfWindow.document.location.href = objectUrl;

Вы также можете использовать страницу c в качестве заполнителя вместо about:blank, например, страницу, которая просто отображает сообщение, например Loading....

Я не уверен, как справиться с этой window.navigator.msSaveOrOpenBlob вещью, поскольку я совсем не знаком с ней.

...