为什么 Chrome 将我的新标签检测为广告？ - ReactJS

Question

我有一个可能很奇怪的问题，但仍然有点烦人。在我们的界面中，我们通过简单地单击按钮并在新选项卡上预览 PDF 文件来创建用户交互。一切正常，但如果您 Chrome AdBlocker 扩展已激活，它会自动触发，并且不允许用户预览他的文档。这有点烦人，因为我必须为每个用户显示一条大消息，以便有一个正常工作的应用程序来禁用他们的 AdBlocker 扩展。所以我问自己有没有办法防止这种情况发生？

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

Answer 1

浏览器中常见的弹出窗口阻止策略是要求任何新的 window/tab 作为用户交互的直接结果打开。由于您的点击事件处理程序启动了一个异步过程，并且您在新的 window 解决之前不会打开它，这意味着浏览器将阻止它，因为用户交互和 [=11= 之间已经过去了太多时间].

解决此问题的最简单方法是在开始读取数据之前打开 window，然后在准备好数据后写入它。这样的事情应该有效：

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;

您也可以使用静态页面作为占位符，而不是 about:blank，例如一个只显示消息的页面，例如 Loading....

我不确定如何处理那个 window.navigator.msSaveOrOpenBlob 事情，因为我一点也不熟悉它。

为什么 Chrome 将我的新标签检测为广告？ - ReactJS

Why Chrome detects my new tab as an Ad ? - ReactJS

javascript

google-chrome

adblock

reactjs