Javascript 如何通过服务人员区分常规和iframe请求？ 有一个带有iframe（http://localhost:8080）和已连接的服务工作者，监视来自页面和iframe的所有获取请求 有一些内部页面请求（加载favicon、内部脚本等）和iframe请求（加载iframe中页面的静态资源） 当iframe资源（如css）具有绝对链接时——没问题，很容易区分本地请求（从http://localhost:8080）和iframe请求（从外部netloc开始） 当iframe资源具有非绝对链接时，如images/smth.jpg，我无法区分内部和外部请求，因为它们都以http://localhost:8080

因此，问题是：如何区分这些要求？也许有一种方法可以查看请求的源元素（iframe）

---

目前，我实现的唯一解决方案是将所有本地资源移动到某个名为的硬唯一文件夹中，如果请求不是以它开头的，则可以将其计为iframe请求。不过，我还是希望有一个更好的解决方案：）

事实证明，这个解决方案非常简单。首先，您需要在其和iframe激活后向服务工作者发送消息（从iframe发送）：

然后，您需要处理消息并遍历

clientId

s，这样您就可以将主窗口和iframe id保存为变量以用于过滤

let windowClientId = '';
let iframeClientId = '';

addEventListener('message', (event) => {
    if (event.data.code === 'get-client-id') {
        self.clients.matchAll().then(function (clients) {
            clients.forEach(function (client) {
                if (client.frameType === "top-level") {
                    windowClientId = client.id
                } else if (client.frameType === "nested") {
                    iframeClientId = client.id
                }
            });
        });
    }
});

之后，您可以根据需要筛选和处理请求：

self.addEventListener('fetch', function (event) {
    // Don't process any requests if worker/iframe are not activated fully
    if (!windowClientId || !iframeClientId) {
        return;
    }
    // Don't process main window resources
    if (event.clientId === windowClientId) {
        return;
    }
    // do smth
})

---

可能，可以通过监视

clientId

来完成，因此需要捕获一些明显的本地id，保存它，然后与所有其他id进行比较。是的，这就是解决方案。您可以在iframe

load

之后捕获所有

clientId

s，而不仅仅是根据

clientId

过滤所有主窗口请求。

self.addEventListener('fetch', function (event) {
    // Don't process any requests if worker/iframe are not activated fully
    if (!windowClientId || !iframeClientId) {
        return;
    }
    // Don't process main window resources
    if (event.clientId === windowClientId) {
        return;
    }
    // do smth
})