如何在iframe执行前修改其src属性？MutationObserver方案失效求助

你的问题核心在于MutationObserver的childList回调触发时机晚于浏览器开始加载iframe的时机——当iframe被添加到DOM时，浏览器已经发起了原src的请求，此时修改src只能触发新请求，但原请求可能已经完成或正在进行，导致你看到原页面加载。

两种可行解决方案： #

方案1：增强MutationObserver监听（覆盖静态+动态iframe）

先处理页面中已有的静态iframe，再同时监听节点添加和属性变化，确保在src设置或节点插入时立即修改：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Intercept Iframe Src</title>
</head>
<body>
  <script>
    function interceptIframeSrc() {
      // 先处理页面已有的iframe
      document.querySelectorAll('iframe').forEach(iframe => {
        iframe.src = 'index8.html';
      });

      const observerConfig = {
        subtree: true,
        childList: true,
        attributes: true,
        attributeFilter: ['src'], // 只监听src属性变化
        attributeOldValue: true
      };

      const observerCallback = (mutations) => {
        mutations.forEach(mutation => {
          // 处理新增的iframe节点
          if (mutation.type === 'childList') {
            mutation.addedNodes.forEach(node => {
              if (node.tagName?.toLowerCase() === 'iframe') {
                node.src = 'index8.html';
                // 可选：停止可能已启动的加载
                node.contentWindow?.stop();
              }
            });
          }
          // 处理iframe的src属性修改
          else if (mutation.type === 'attributes') {
            const iframe = mutation.target;
            if (iframe.tagName?.toLowerCase() === 'iframe' && iframe.src !== 'index8.html') {
              iframe.src = 'index8.html';
            }
          }
        });
      };

      new MutationObserver(observerCallback).observe(document.documentElement, observerConfig);
    }

    interceptIframeSrc();
  </script>

  <iframe src="index2.html"></iframe>
</body>
</html>

方案2：使用beforeload事件（更高效的前置拦截）

beforeload事件在资源开始加载前触发，直接拦截初始请求，无需等待DOM插入：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Intercept Iframe Src</title>
</head>
<body>
  <script>
    // 捕获阶段监听，确保最先触发
    document.addEventListener('beforeload', (e) => {
      const target = e.target;
      if (target.tagName?.toLowerCase() === 'iframe') {
        e.preventDefault(); // 阻止默认加载行为
        target.src = 'index8.html'; // 设置新src，自动触发加载
      }
    }, true);
  </script>

  <iframe src="index2.html"></iframe>
</body>
</html>

原代码的问题说明： #

• 你原代码的else分支逻辑错误：遍历div却给父节点node设置src，这完全无效，应该改为查找div内部的iframe。
• 未监听attributes变化，无法拦截动态修改src的场景。

内容的提问来源于stack exchange，提问作者Gérard Hazebrouck