无法访问iframe的contentDocument，如何获取其中的base64字符串？

你遇到的核心问题是iframe尚未完成加载就提前访问了contentDocument，所以返回空值；而控制台能看到内容是因为控制台是实时查看，此时iframe已经加载完毕。以下是两种可靠的解决方法：

方法一：监听iframe的load事件（推荐） #

通过监听iframe的加载完成事件，确保内容渲染完毕后再获取目标字符串：

function addIframe() {
  var x = document.createElement("iframe");
  x.setAttribute("id", "PDFframe");
  x.setAttribute("src", "http://localhost:8080/mywebsite/boxlabelpdf.htm");
  x.setAttribute("style", "visibility:hidden;");
  
  // 绑定加载完成事件
  x.addEventListener('load', function() {
    var iframe = document.getElementById("PDFframe");
    // 此时可正常访问contentDocument内容
    var targetText = iframe.contentDocument.lastChild.innerText;
    // 提取base64字符串（适配带data前缀或纯base64的情况）
    var base64Str = targetText.match(/data:[^;]+;base64,([^\s]+)/)?.[1] || targetText.trim();
    console.log(base64Str);
  });
  
  document.body.appendChild(x);
}

方法二：轮询检测动态内容（适配iframe内部异步生成内容的场景） #

如果iframe的内容是通过内部JS动态插入的，load事件可能无法覆盖异步完成的时机，此时用定时器轮询更可靠：

function addIframe() {
  var x = document.createElement("iframe");
  x.setAttribute("id", "PDFframe");
  x.setAttribute("src", "http://localhost:8080/mywebsite/boxlabelpdf.htm");
  x.setAttribute("style", "visibility:hidden;");
  document.body.appendChild(x);
}

function fetchBase64() {
  var iframe = document.getElementById("PDFframe");
  var checkTimer = setInterval(() => {
    // 检测内容是否存在
    if (iframe.contentDocument?.lastChild?.innerText) {
      clearInterval(checkTimer);
      var targetText = iframe.contentDocument.lastChild.innerText;
      var base64Str = targetText.match(/data:[^;]+;base64,([^\s]+)/)?.[1] || targetText.trim();
      console.log(base64Str);
    }
  }, 150); // 每150ms检测一次
}

// 执行流程
addIframe();
setTimeout(fetchBase64, 300); // 延迟启动轮询，避免过早检测

注意事项 #

• 必须保证主页面与iframe页面同域（均为localhost:8080），否则浏览器的跨域安全策略会禁止访问contentDocument。
• 如果目标base64字符串有固定格式，可优化正则表达式提高匹配准确性。

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