Service Worker预加载请求报错，iframe YouTube校验try-catch失效求助

1. 为什么try-catch未生效 #

修改iframe的src是异步加载操作，加载失败的错误不会在同步的try-catch块中抛出，而是会触发iframe的error事件，因此需要通过监听该事件来捕获加载异常。

2. 修复前端校验逻辑 #

替换原有的try-catch逻辑，通过监听iframe的error事件来处理加载失败的情况，同时优化DOM元素的重复获取：

const iframe = document.getElementsByClassName("responsive-iframe")[0];
const input = document.getElementsByClassName("addlinkss")[0];
const originalSrc = iframe.src;

async function youtubeshow(id) {
  // 移除之前绑定的error监听，避免重复触发
  iframe.removeEventListener('error', handleIframeError);
  
  const inputValue = input.value;
  // 校验YouTube短链接格式
  if (inputValue.startsWith('https://youtu.be/') && inputValue.length === 28) {
    const videoId = inputValue.slice(17);
    const embedUrl = `https://www.youtube.com/embed/${videoId}`;
    
    // 绑定加载错误监听
    iframe.addEventListener('error', handleIframeError);
    iframe.src = embedUrl;
  } else {
    // 恢复iframe原始地址
    iframe.src = originalSrc;
    console.log(`no ${inputValue.length}`);
    input.focus();
  }
}

// 处理iframe加载失败的回调
function handleIframeError() {
  alert("视频加载失败，请检查链接有效性");
  iframe.src = originalSrc;
  iframe.removeEventListener('error', handleIframeError);
}

3. 解决Service Worker预加载错误 #

该错误与前端校验代码无关，是Service Worker的预加载逻辑问题，可通过以下两种方式修复：

• 方式一：等待预加载响应完成
  在Service Worker的fetch事件中，用respondWith()或waitUntil()确保预加载Promise完成：

self.addEventListener('fetch', (event) => {
  event.respondWith((async () => {
    const preloadResponse = await event.preloadResponse;
    if (preloadResponse) {
      return preloadResponse;
    }
    return fetch(event.request);
  })());
});

• 方式二：禁用导航预加载
  如果不需要使用导航预加载，可直接在Service Worker中禁用：

self.addEventListener('activate', (event) => {
  event.waitUntil(self.registration.navigationPreload.disable());
});

内容的提问来源于stack exchange，提问作者Omar