为何iframe加载的源码与原文件存在差异？如何获取完全一致的源码

你当前实现无法拿到和原文件完全一致源码的核心原因是：浏览器将HTML加载到iframe时会自动执行DOM规范化操作，会自动丢弃重复<html>标签、移除现代浏览器不支持的IE条件注释、补全缺失的标签结构，你通过DOM API读取的outerHTML是规范化后的结构，不可能和原始源码完全一致。
想要拿到完全未修改的原始源码，最佳方案是直接读取原始文件的文本内容，完全绕过DOM解析环节。

直接用fetch请求iframe加载的原文件地址，拿到的就是未被修改的原始文本：

<a href="#" onclick="getIframeContent('myPage.html');">
    Get the content of Iframe
</a>
<br />
<textarea id="txtarea" style="width:100%;height:300px"></textarea>
<br>
<iframe id="myI" src="myPage.html" style="width: 100%; height: 100vh;"></iframe>

<script>
async function getIframeContent(filePath) {
    const response = await fetch(filePath);
    const rawContent = await response.text();
    document.getElementById('txtarea').value = rawContent;
}
</script>

Blazor不需要依赖JS读取iframe内容，直接注入HttpClient请求原文件即可，同时支持Blazor WASM和Blazor Server：

@inject HttpClient Http

<textarea @bind="RawFileContent" style="width:100%;height:300px"></textarea>
<br/>
<iframe src="myPage.html" style="width: 100%; height: 100vh;"></iframe>
<br/>
<button @onclick="LoadRawContent">获取原始文件内容</button>

@code {
  public string RawFileContent { get; set; }

  private async Task LoadRawContent()
  {
    // 读取到的内容和原文件完全一致，无任何改动
    RawFileContent = await Http.GetStringAsync("myPage.html");
  }
}

• 上述方案要求请求的文件和当前站点同源，跨域场景需要目标文件的服务端配置CORS规则允许访问
• 如果是用户本地上传的文件需要预览+导出，可直接读取上传的File对象的原始文本存储，导出时直接使用存储的内容即可，不需要读取iframe内容

内容的提问来源于stack exchange，提问作者E.D.