Javascript 为什么Chrome会将我的新标签检测为广告反应

Javascript 为什么Chrome会将我的新标签检测为广告反应,javascript,reactjs,google-chrome,adblock,Javascript,Reactjs,Google Chrome,Adblock,我有一个可能很奇怪的问题,但还是有点烦人。 在我们的界面中,我们创建了一个用户交互,只需单击一个按钮并在新选项卡上预览PDF文件。一切正常,但如果你激活了Chrome AdBlocker扩展,它会自动触发,不允许用户预览他的文档。这有点烦人,因为我必须为每个用户显示一条大消息,以便有一个正常工作的应用程序来禁用他们的AdBlocker扩展。所以我问自己,有没有办法防止这种情况发生 浏览器中一种常见的弹出式阻止策略是,用户交互的直接结果是需要打开任何新窗口/选项卡。由于单击事件处理程序启动了一个异

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


浏览器中一种常见的弹出式阻止策略是,用户交互的直接结果是需要打开任何新窗口/选项卡。由于单击事件处理程序启动了一个异步进程,并且在解决该问题之前不会打开新窗口,这意味着浏览器将阻止它,因为用户交互和
window.open()

解决此问题的最简单方法是在开始读取数据之前打开窗口,然后在数据准备就绪后写入。像这样的方法应该会奏效:

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
这件事,因为我对它一点也不熟悉。

请分享您为打开PDF@Lennholm更新了!与广告无关。事实上,你正在异步打开弹出窗口。一个窗口必须随着用户的动作而打开,不能有延迟。所以,选项是先打开窗口并加载消息,或者为什么要使用Ajax调用并将表单发布到新窗口。只需在执行此操作之前检查保存代码是否受支持。更好的选择可能是只执行在新窗口中加载PDF的post请求,而不是执行ajax请求,将结果转换为blob,然后导航到那里。@Lenholm感谢您的回答,但我已经尝试过此方法。问题仍然存在。@PandaMastr您的意思是,即使您将
window.open()
放在单击事件处理程序的顶部,它也不会打开新窗口?@Lennholm行为是一样的。它试图打开一个新窗口,但被AdBlocker阻止。@PandaMastr可能您已将浏览器配置为阻止所有弹出窗口,那么它无论如何都无法工作。我很确定所有浏览器的默认配置都是允许用户交互直接打开弹出窗口。您是以本机方式应用事件处理程序,还是使用具有自己的事件系统(如React)的框架或库?这些事件处理程序可能会变成间接的。
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;