javascript - pdf 文件的 xmlhttprequest 适用于同步，但不适用于异步

Question

我正在测试一些代码，通过捕获用户点击的链接从 Chrome 扩展中抓取 PDF。同步 xm​​lhttprequest 适用于 html 文档和 pdf 的链接。然而，异步似乎永远不会返回。我是不是做错了什么？

这是失败的异步版本中我的 content.js 的最小演示示例:

var links = document.getElementsByTagName("a");

function getlink(link) {
    console.log("looking for link");
    var x = new XMLHttpRequest();
    x.open("GET", link, true);
    x.onload = function(e) {
        console.log("loaded");
        console.log(link);
        console.log(x.status);
    };

    x.onerror = function (e) {
        console.error(x.statusText);
    };

    x.send(null);
}

for (i = 0, len = links.length; i < len; i++) {
    var l = links[i]
    l.addEventListener("click", function() {
        console.log(this.href);
        getlink(this.href);
    }, false);
};

使用该代码，当单击 html 文档的链接时，它会按预期记录“寻找链接”、“已加载”、url 和“200”。这也是我重写此代码以同步获取时记录的内容(通过将 open 方法的最后一个参数切换为 true，并将所有日志记录代码从 unload 中移出) code> 到调用函数。

但是当我异步获取 pdf 时，它只是说“正在寻找链接”，然后就是沉默——没有错误，没有响应。它确实给了我一条消息:

Resource interpreted as Document but transferred with MIME type application/pdf: "[URL TO PDF]".

但我不确定这是否来自 javascript 链接捕获，还是普通的浏览器点击操作。

有人对此有任何见解吗？不幸的是，我想我必须异步执行此操作...

Answer 1

在同步模式下，会在默认链接事件处理程序看到单击事件之前获取 PDF。

在异步模式下，浏览器首先处理点击事件并在当前选项卡中加载 PDF 文件，因此原始页面及其所有事件处理程序和回调都会被销毁。

方法 1:使用 background (event) page脚本:

• 在后台页面定义一个消息监听器:chrome.runtime.onMessage，它将异步获取 PDF
• 在点击处理程序中使用 chrome.runtime.postMessage 发送包含 PDF 网址的消息

方法 2:禁用默认点击行为:

    l.addEventListener("click", function(e) {
        e.preventDefault();
        //e.stopPropagation(); // may be needed if the page has a custom event handler
        //e.stopImmediatePropagation(); // same reason
        console.log(this.href);
        getlink(this.href);
    }, false);
    .........

也许在获取 PDF 后进行导航:

function getlink(link) {
    .........
    x.onload = function(e) {
        console.log("loaded");
        console.log(link);
        console.log(x.status);
        window.location.href = link;
    };
    .........