如何监听iframe中克隆添加的样式表加载并应用完成的事件？

因为你的iframe已经完成初始加载，所以load和DOMContentLoaded事件不会再触发——这两个事件仅在iframe首次加载完成时执行一次。要确认克隆的样式表全部加载应用，需要监听每个样式链接自身的加载事件，或者用Promise封装成可await的加载逻辑。

方式一：用async/await实现批量样式加载等待 #

先封装一个Promise化的样式加载函数，然后用Promise.all批量处理父窗口的样式表：

// 封装单个样式链接的加载为Promise
function loadStyleLink(linkEl, targetDocument) {
  return new Promise((resolve, reject) => {
    const clonedLink = linkEl.cloneNode(true); // 深克隆样式链接
    
    // 监听加载成功/失败
    clonedLink.onload = () => resolve(clonedLink);
    clonedLink.onerror = () => reject(new Error(`样式加载失败: ${clonedLink.href}`));
    
    targetDocument.head.appendChild(clonedLink);
  });
}

// 批量克隆并等待所有样式加载完成
async function cloneParentStylesToIframe(iframe) {
  const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
  // 获取父窗口所有样式表链接
  const parentStyleLinks = Array.from(window.parent.document.querySelectorAll('link[rel="stylesheet"]'));

  try {
    // 等待所有样式加载完成
    await Promise.all(parentStyleLinks.map(link => loadStyleLink(link, iframeDoc)));
    console.log('所有父窗口样式已成功加载到iframe');
    // 这里写样式加载完成后的逻辑（比如渲染依赖样式的内容）
  } catch (err) {
    console.error('样式加载出错:', err);
  }
}

// 调用示例（替换成你的iframe元素）
cloneParentStylesToIframe(document.getElementById('target-iframe'));

方式二：用计数监听批量加载完成 #

如果不想用async/await，也可以通过统计已加载的样式数量，判断是否全部完成：

function cloneParentStylesToIframe(iframe) {
  const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
  const parentStyleLinks = Array.from(window.parent.document.querySelectorAll('link[rel="stylesheet"]'));
  let loadedCount = 0;
  const totalStyles = parentStyleLinks.length;

  parentStyleLinks.forEach(link => {
    const clonedLink = link.cloneNode(true);
    
    clonedLink.onload = handleLoad;
    clonedLink.onerror = handleLoad;

    function handleLoad() {
      loadedCount++;
      if (loadedCount === totalStyles) {
        console.log('所有样式已加载（含加载失败的）');
        // 执行后续逻辑
      }
    }

    iframeDoc.head.appendChild(clonedLink);
  });
}

注意事项 #

• 使用cloneNode(true)深克隆，确保样式链接的所有属性（比如href、media、crossorigin）都被复制
• 缓存的样式表会立即触发onload事件，不会导致Promise挂起
• 如果父窗口有内联样式（<style>标签），同样可以用类似逻辑克隆到iframe的head中

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